Hydroframe Frontend

Table of Contents:

• Hydroframe Frontend
  • Table of Contents:
  • Installation and Usage
    • Requirements
    • Downloading The Repo
    • Local Development (NPM)
    • Local Development (Docker)
    • Local Development (docker-compose)
      • Note: (node module installation)
  • Static Deployment
  • Deployment
    • Deployment Requirements:
    • Steps:

Installation and Usage

Please first follow the instructions for downloading the repository locally and then follow the section that best suits your development environment.

Requirements

• Windows/Unix Environment
• One of the following installed locally
  • NPM v16
  • Docker
  • Docker w/ docker-compose
• An internet connection

Downloading The Repo

1. Clone the repository locally with the command:

   git clone git@github.com:hydroframe/hydroframe-frontend.git

2. Change directory to the cloned repository using the following command

   cd hydroframe-frontend

3. Follow one of the following instruction sets based on your preferred dev environment:
   • NPM
   • Docker
   • docker-compose
   • Note: (node module installation)

Local Development (NPM)

1. Copy the next.config.dev.js file to one named next.config.js.

2. Install node modules using the command:

   npm install

3. Start the development server with the following command:

   npm run dev

4. Verify the application is running by clicking this link: http://localhost:3000

5. Launch the HydroFrame Flask app by following the directions in the README.

6. The frontend should be running locally at http://localhost:3000 along with the backend at http://localhost:5000. You can now develop the frontend interactively and it will send API requests to the locally hosted backend.

Local Development (Docker)

1. Build the docker container using the following command (Replace tag_name with your own unique name):

   docker build -f Dockerfile-dev -t {tag_name}

2. Run the docker container with the following command (Replace tag_name with that chosen in Step 1 and replace port_number with your chosen port number (*usually 3000)):

   docker run -p {port_number}:{port_number} {tag_name}

3. Verify the application is running by clicking this link (Default port is 3000): http://localhost:{chosen_port_number}

Local Development (docker-compose)

1. Build and run the application using the following command:

   docker-compose build

2. Start the container with the following command:

   docker-compose up

3. Verify the application is running by clicking this link: http://localhost:3000

Note: (node module installation)

For npm install changes to take effect, the container must be destroyed and rebuilt with the following command:

docker-compose down -v && docker-compose build

Static Deployment

Currently the frontend code is exported as static files and served up by the Flask server on Verde.

If you are running an export locally, first make sure you have the Flask app repository residing at the same level as this repository. Copy next.config.dev.js to next.config.js, and then run the following command:

npm run export:dev

If you are running an export on Verde, copy next.config.prod.js to next.config.js and then run the following command:

npm run export:prod

These commands will build the project, generate the static files, and copy them to the location of the Flask repository.

Deployment

The following steps should be taken to build and deploy the application container.

Deployment Requirements:

• Docker

Steps:

1. Build the container image with the following command:

   docker build -f Dockerfile-prod -t {tag_name}

2. Run the image using the following command:

   docker run -p {port_number}:{port_number} {tag_name}