app.exploreapollo.org

Development

This project requires Node >=12.8 and npm >=6.X You should install node using nvm.

Start Hacking

1. npm install to grab all the goodies
2. npm run dev to start a hot-reloading development server

Other useful commands:

• npm test to run the tests
• npm run tdd to continuously run tests as you code
• npm run lint to check your changes against the linting guidelines

Note about HTTPS and the development server: the development server uses a self-signed SSL certificate. When you open the development server for the first time it will squawk about the certificate being invalid. The certificate is not invalid or insecure, it is just self-signed.

Branches and Versioning

The master is considered "hot" and is continously deployed to production. NOTE: The master branch previously was deployed to a staging server, and tagged versions were deployed. However, in the React upgrade, this added step seems to have been broken. Ideally, this should be reimplemented such that only tagged commits are deployed to the live website.

Day-to-day development is done on the develop branch. The develop branch is continuously deployed to a development server for evaluation.

The development promotion workflow is as such:

1. Work on a feature branch
2. Pull request the develop branch
3. develop branch is merged into master when ready

This project is semantically versioned. Changes that break compatibility with the remote API are considered breaking changes.

Debugging

When in doubt: delete the node modules folder and npm install again.

rm -rf node_modules
npm cache clean
npm i --progress=false

Project Structure

Source lives in src/. Compiled output goes in dist/. Configuration goes in config/.

Source Files

• containers/: Stateful react components. These are usually top-level route handlers.
• components/: Stateless/Dumb react components. These guys determininstically render based on props.

Configuration Values

Configuration values are stored in the config/ directory. You gain access to the configuration values by importing the config object from config/index.js. The configuration values are loaded as such:

1. The values in config/default.js
2. The values in config/{{APP_ENV}}.js where APP_ENV is an environment variable.
3. If APP_ENV is not set, config/development.js will be loaded by default.

the logic for loading the config is here.

Example

We use the configuration file to determine the API entry point in our actions.

1. import the configuration object
2. use the configuration object
3. If the APP_ENV is set to staging, this will be the value for config.apiEntry.

Consider the following example commands:

npm run dev                     # runs dev server with development API
APP_ENV=staging npm run dev     # runs dev server with staging API
APP_ENV=production npm run dev  # runs dev server with production API