Browseui

A React-based application for displaying BROWSE images stored in an S3 bucket.

---

Local Setup

To get Browseui up and running on your local machine, follow these steps:

Prerequisites

You'll need the following tools installed:

• nvm (Node Version Manager): For managing Node.js versions. You can find installation instructions on the nvm GitHub page.
• Yarn: A fast, reliable, and secure dependency manager. Install it by following the instructions on the Yarn website.

Environment Variables

Create a copy of the .env.dev file and name it .env. Populate it with your specific environment variables:

REACT_APP_BASE_URL='xxxxxxx'
REACT_APP_EXCLUDED_PREFIXES='xxxxxxxx'
REACT_APP_ENDPOINT='xxxxxxxxx'

Note: The REACT_APP_ENDPOINT should point to your S3 bucket URL, ensuring proper access permissions. This can be directly accessible or via a CloudFront distribution with correct configurations.

Installation and Running

Once your environment variables are set, use the following commands:

1. Select Node.js Version:

   nvm use

   This command ensures you're using the appropriate Node.js version specified for the project.

2. Install Dependencies:

   yarn

   This will install all the necessary project dependencies.

3. Start Development Server:

   yarn start

   This command will launch the development server, and you can access Browseui in your browser.

---

Bundling as a Library

You can package browse-ui as a reusable library for distribution via the npm registry.

1. Build the Library

Use the provided build command to generate the library bundle:

This will create a production-ready build in the dist (or equivalent) directory.

yarn build-lib

2. Prepare for Publishing

Ensure the name and version fields in your package.json are correctly set.
These two fields together uniquely identify your package in the npm registry.

3. Authenticate with npm

If you haven't already, log in to your npm account.
If you don’t have one, you can sign up here.

npm login

4. Publish the Package

Once authenticated, publish your library to npm:

npm publish

Note:

• Make sure your package name is unique if it's public.
• Consider using scoped packages (e.g., @your-org/browse-ui) for organization or private packages.
• For more details, see the npm publishing guide.

---

After publishing, your library can be installed in any project via:

Usage as a Library

Browseui can also be used as a library within other React applications.

Installation

Install the library via npm or yarn:

npm install browse-ui
# or
yarn add browse-ui

Usage

Import CloudBrowse:

import { CloudBrowse } from 'browse-ui';

Create a Configuration Variable:

const config = {
  cloudWatchUrlBase: "xxxxx",
  sourceIMGUrl: "xxxxx",
  version: "xxxxx",
  excluded_prefixes: ["xxxxx"]
};

Use the CloudBrowse Component:

<CloudBrowse config={config}/>

Note: Configuration settings can also be provided directly in the host React application's .env file. For example:

REACT_APP_BASE_URL="xxxxx"
REACT_APP_EXCLUDED_PREFIXES="xxxxx"
REACT_APP_ENDPOINT="xxxxx"

Peer Dependencies

This component has the following peer dependencies that you will need to install in your host application:

"peerDependencies": {
    "react": "^18.2.0 || ^19.0.0",
    "react-dom": "^18.2.0 || ^19.0.0",
    "@mui/material": "^5.14.2 || ^6.0.0 || ^7.0.0"
}

Make sure these versions (or compatible ones) are installed in your project to avoid issues.