Skip to content

Developer Environment Setup

Jump to bottom
Matthew Logan edited this page Jul 16, 2023 · 1 revision

Developer Environment Setup

The Wayfinder application is a three-tier architecture model leveraging the MERN Stack (MongoDB, Express.js, React, and Node) with TypeScript configurations for its development.

The repository is designed as a single repository that contains all aspects of the application. This guide will assist you in setting up the Wayfinder application and its components in your development environment.

If you only want to view a containerized version of this application, proceed to the Docker section.


Software Prerequisites

To use this manual, we recommend the following software be installed on your device.

By using this software, this documentation will be able to assist you in setting yourself up for success.

Visual Studio Code Extensions

To optimize your development experience with Wayfinder, we recommend installing the following Visual Studio Code (VSC) extensions that work with our preconfigured TypeScript and AirBNB Style Guide setup.

By installing these extensions in VSC, you will be able to benefit from code linting, error detection, and formatting that aligns with the Wayfinder code base.


Setup

Pulling the Wayfinder source code to your device is quick and easy. Follow these short steps to download all the source code and the necessary packages for development.

  1. Open your terminal to the folder location where you want to save the repository.

Now that you are in your designated folder, enter the following commands in the terminal:

  1. git clone https://github.com/bcgov/citz-imb-wayfinder.git

  2. cd citz-imb-wayfinder

  3. cd src\frontend-pwa

  4. npm i

  5. cd ..\api

  6. npm i

Congratulations! All the required packages are installed, bringing you one step closer to developing with the Wayfinder application.


Environment Variables

Environment variables are used to keep your secrets a secret! By using environment variables, you will protect designated values from public eyes, improving the security of your codebase.

Environment variables are used across the application for development. There are three .env files to configure for developing within the Wayfinder application. For simplicity of setup, you will find a .env.template file in each of the target locations.

To get started with setting up your .env files, follow these simple steps:

  1. Open your terminal and navigate to the root folder of the application.

  2. Depending on your operating system, run the appropriate command into the terminal.

Powershell Terminal:

New-Item src\api\.env; New-Item src\frontend-pwa\.env; New-Item .env

UNIX/MacOS Terminals:

touch src\api\.env src\frontend-pwa\.env .env


Running these commands will have created the necessary .env files. These files will be used to configure environment variables used across the application.


Frontend

There is no .env configuration necessary for front-end development.


Backend

To configure the environment variables for the back-end of the Wayfinder application, follow these steps:

  1. Open the .env file located in the src\api folder in your editor.

  2. Populate the file with the keys shown in Table 1 using the format KEY=VALUE.


KEY VALUE DESCRIPTION
MONGO_PORT 27017 Default port for MongoDB
MONGO_USERNAME wf-admin Username for default user
MONGO_PASSWORD wf-admin Password for default user
MONGO_DATABASE wf-db Target name for Mongo Database
API_PORT 3000 Port for Express API
API_HOSTNAME localhost Address for host connections
MONGO_SERVICE Leave blank Production address for MongoDB Host
SCRAPER_API_KEY devKey API Key for accessing PATCH method on /locations endpoint
ADMIN_KEY devKey API key for accessing /account endpoint as owner
CONTAINERIZED false Boolean for switching between production and development targets

[Table 1. Backend .env Key Configuration]


Database / Docker

To configure the environment variables for the Database and Docker configuration of the Wayfinder application, follow these steps:

  1. Open the .env file in your root folder editor.

  2. Populate the file with the keys shown in Table 2 using the format KEY=VALUE.


KEY VALUE DESCRIPTION
MONGO_PORT 27017 Default port for MongoDB
MONGO_USERNAME wf-admin Username for default user
MONGO_PASSWORD wf-admin Password for default user
MONGO_DATABASE wf-db Target name for Mongo Database
API_PORT 3000 Port for Express API
API_HOSTNAME localhost Address for host connections
MONGO_SERVICE Leave blank Production address for MongoDB Host
SCRAPER_API_KEY devKey API Key for accessing PATCH method on /locations endpoint
ADMIN_KEY devKey API key for accessing /account endpoint as owner
CONTAINERIZED false Boolean for switching between production and development targets
POSITION_STACK_API_KEY Get yours free Free position stack API Key
GEO_API_KEY Get yours free Free Geoapify API Key

[Table 2. Database/Docker .env Key Configuration]


Scraper

To configure the environment variables for the Web scraper of the Wayfinder application, follow these steps:

  1. Open the .env file located in the src\scraper folder in your editor.

  2. Populate the file with the keys shown in Table 3 using the format KEY=VALUE.


KEY VALUE DESCRIPTION
POSITION_STACK_API_KEY Get yours free Free position stack API Key
GEO_API_KEY Get yours free Free Geoapify API Key
SCRAPER_API_KEY devKey API Key for accessing PATCH method on /locations endpoint on API
WAYFINDER_API_URL http://localhost:3000 Base URL for targetting API

[Table 3. Scraper .env Key Configuration]


Docker

**Failure to complete the .env setup for the scraper section section will result in failure to build that container. However, This will not affect your ability to run the rest of the application.

To begin using Docker Desktop, you'll find that all the necessary Dockerfiles and docker-compose files are preconfigured, streamlining the deployment process to ensure an effortless setup. Simply follow the three easy steps below to begin.

  1. Run Docker Desktop on your computer.

  2. Open a terminal in the root folder of your workspace.

  3. run docker-compose up.

After these steps are completed, Docker will proceed to build your containers and start running them.

After completing these steps, Docker will automatically build and run your containers. Please be patient as your Docker containers initialize. The Wayfinder app will be up and running once the build process is finished.

CITZ-IMB-WAYFINDER 2023

Clone this wiki locally