Skip to content

README.md

Latest commit

 

History

History
111 lines (77 loc) · 4.27 KB

README.md

File metadata and controls

111 lines (77 loc) · 4.27 KB
Raw

Team CHRS

Capstone project repository for contributing to the Center of Hydrometeorology and Remote Sensing iRain V2 product for Saudi Arabia

Technology Stack:

  • React (client side project)
  • Express (server side project)
  • Javascript (for both UI and API server)
  • PostgresSQL (data persistence)

For Development

How to run Server Side

  1. For first time setup:

    • Go to root directory of this project (team-csrs-mswe-capstone-2024)

    • Go to server folder.

    • Create a file called .env.development (If for production release, then .env.production). Then populate the content with:

      POSTGRES_ADDRESS=SOMEADDRESS
      POSTGRES_PORT=SOMEPORT
      POSTGRES_USERNAME=SOMEUSERNAME
      POSTGRES_PASSWORD=SOMEPASSWORD
      POSTGRES_DB=SOMEDB
      APP_BASE_URL=SOMEURL

    • Populate the variables stated in the file and then save.

    • Go to server directory, run npm run envconf-notrack. This should be very quick.

    • While in the same directory, run npm install

  2. Run the server side project:

    • Go to root directory of this project (team-csrs-mswe-capstone-2024)
    • Run cd server && npm run start:dev
    • In a browser of choice, open a tab and go to http://localhost:3001/swagger. You will shown a Swagger API documentation page.

How to run Client Side

  1. For first time setup:

    • Go to root directory of this project (team-csrs-mswe-capstone-2024)

    • Go to web folder.

    • Create a file called .env.development (If for production release, then .env.production). Then populate the content with:

      REACT_APP_BASE_API_URL=SOMEURL
      REACT_APP_GMAPS_API_KEY=SOMEAPIKEY
      REACT_APP_GMAPS_ID=SOMEMAPID

    • Populate the variables stated in the file and then save.

    • Go to web directory, run npm run envconf-notrack. This should be very quick.

    • While in the same directory, run npm install

  2. Run the client side project:

    • Go to root direectory of this project (team-csrs-mswe-capstone-2024)
    • Run cd web && npm run start:dev
    • A browser window with address http://localhost:3000 should automatically open

For Production

How to deploy Server Side

  1. For general setup:

    • Go to root directory of this project (team-csrs-mswe-capstone-2024)

    • Go to server folder.

    • Find the .env.production file. If it does not exist, create one in the current path. If blank, populate it with the following:

      POSTGRES_ADDRESS=SOMEADDRESS
      POSTGRES_PORT=SOMEPORT
      POSTGRES_USERNAME=SOMEUSERNAME
      POSTGRES_PASSWORD=SOMEPASSWORD
      POSTGRES_DB=SOMEDB
      APP_BASE_URL=SOMEURL

    • Populate the variables stated in the file and then save.

    • While in the same directory, run npm install

  2. Run the server side project (production):

    • Go to root directory of this project (team-csrs-mswe-capstone-2024)
    • Run cd server && npm run start:prod
    • After the process is finished, check the Terminal output to if the output has this:

    ``API Server Active! [PRD ENVIRONMENT] - Deployed URL: <<DEPLOYED_API_URL>>`

How to deploy Client Side

  1. For first time setup:

    • Go to root directory of this project (team-csrs-mswe-capstone-2024)

    • Go to web folder.

    • Find the .env.production file. If it does not exist, create one in the current path. If blank, populate it with the following:

      REACT_APP_BASE_API_URL=SOMEURL
      REACT_APP_GMAPS_API_KEY=SOMEAPIKEY
      REACT_APP_GMAPS_ID=SOMEMAPID

    • Populate the variables stated in the file and then save.

    • While in the same directory, run npm install

  2. Deploy the client side project (production):

    • Go to root direectory of this project (team-csrs-mswe-capstone-2024)
    • Run cd web && npm run build
    • Once finished, find the build folder in the web folder. This will contain the production-ready files.
    • With the hosting server ready, transfer the contents of the build folder where the production client-side files are stored.
    • Once finished, run the appropriate command that restarts the web server configured on the hosting server (ex: Apache/nginx)
    • When process is fully started, open a browser and go to the URL that is configured to host the web application.