Space Xplorer Client

UI interface for allowing users to book seats on the next SpaceX launch

Prerequisites

There are some pre-requisites needed to run this application

Node (npm or yarn)

You will need node installed on your local development environment. This will include a package manager such as npm or yarn. Preferably yarn due to the dependency management being handled in this case uses yarn.lock file. Consult relevant documentation to have these installed

Docker & Docker Compose

Ensure you have installed docker & docker-compose cli tools in your development environment to be able to run accomanying services that will be required for this frontend application to work. Consult the Docker documentation to be able to install & run docker

Getting started

Once you have all the tools locally, the rest should be straight forward.

Create a .env file in the root of the project. This can be done as below:

cp .env.example .env

Now run docker-compose up in the root of the project

docker-compose up

This will start all services specified in the docker-compose file

If you encounter any challenges running the above command, say, port conflicts, run the below command:

docker stop $(docker ps -aq)

This will stop all running containers

Now, you can run docker-compose up again.

This should get all the services (docker containers) running.

Now, you can install the dependencies:

yarn install (or npm install)

Now run the application with:

yarn start (or npm run start)

Runs the app in the development mode.

The page will reload if you make edits.
You will also see any lint errors in the console.

Access the frontend application on http://localhost:3000

That should be it for getting up & running :).

Available Scripts

In the project directory, you can also run:

yarn test

Launches the test runner in the interactive watch mode.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

yarn lint

Checks for any linting issues with ESlint & TypeScript configurations. Other plugins are included, check here for a list of plugins

yarn lint:fix

Fixes any linting issues found

yarn stylelint:fix

Fixes SCSS linting issues found

yarn serve

Serge static assets. This is to emulate how the application will work behind a static server. This has to be run after yarn build to generate bundle

yarn test

Runs unit tests

yarn test:cover

Runs tests & generates a coverage report

Running application with Docker

We have built the application to make it portable & to do this, we have used Docker to containerize application & make it run in any environment.

Build a docker container for this application with:

docker build -t wyvarn/space-xplorer-client:<TAG> .

Where TAG is the name of the tag to use, if not put, this defaults to latest. Note that the image could be given any other name

Once the image is built, you can run the application in container with the following command:

docker run --name space-xplorer-client -p 8080:8080 wyvarn/space-xplorer-client:<TAG

TAG is the tag you set earlier when building the image, note that the --name flag is optional & can be set to something else

This should give you an output similar to this:

2020-06-19T10:18:12: PM2 log: Launching in no daemon mode
2020-06-19T10:18:12: PM2 log: [Watch] Start watching space-xplorer-client
2020-06-19T10:18:12: PM2 log: App [space-xplorer-client:0] starting in -cluster mode-
2020-06-19T10:18:12: PM2 log: App [space-xplorer-client:0] online
2020-06-19T10:18:12: PM2 log: [Watch] Start watching space-xplorer-client
2020-06-19T10:18:12: PM2 log: App [space-xplorer-client:1] starting in -cluster mode-
2020-06-19T10:18:12: PM2 log: App [space-xplorer-client:1] online
2020-06-19T10:18:12: PM2 log: [Watch] Start watching space-xplorer-client
2020-06-19T10:18:12: PM2 log: App [space-xplorer-client:2] starting in -cluster mode-
2020-06-19T10:18:12: PM2 log: App [space-xplorer-client:2] online
2020-06-19T10:18:12: PM2 log: [Watch] Start watching space-xplorer-client
2020-06-19T10:18:12: PM2 log: App [space-xplorer-client:3] starting in -cluster mode-
2020-06-19T10:18:12: PM2 log: App [space-xplorer-client:3] online
...

This output is from PM2 which is serving the application via Express Server handling static assets

Consult PM2 documentation for further instructions if you want to extend & improve on how this application is run :simple_smile: Configuration can be found here

If the preference is using Nginx to serve static content, we got you. There is a Dockerfile that already caters for this & the build process is pretty much the same:

docker build -f Dockerfile.static -t wyvarn/space-xplorer-client:<TAG> .

Note that you have to pass in the Dockerfile path & you can tag the name however you want.

To run the application

docker run --name space-xplorer-client -p 8080:80 wyvarn/space-xplorer-client:<TAG

Note the difference in the port mapping as this has been set here to listen on 80

That should be it.

You will notice that this has been built to have dynamic Environment variables set as is specified in this shell script which has been baked into the build process when running a build. This is to allow switching environment variables when running in different contexts without triggering a new build in a pipeline. This is useful for cases when using Docker containers However, the normal build pipeline with a CI should already cater fo this.

Deployment

Deploying the application depends on the environment available.

1. If using Docker, there are already configured Dockerfiles that will allow building this application. This & this
2. If deploying behind a Web Server such as Nginx, there are config files already available.
3. If deploying to a static hosting site such as Netlfy, there is a netlify toml file already set & can be modified to suit ones needs

Built With

1. JavaScript - Source language
2. TypeScript - Source language
3. ESLint - JavaScript linter
4. ReactJS - Frontend Library
5. Node
6. Jest - Test framework
7. React Router - React routing for web
8. SASS/SCSS - Styling
9. GraphQL
10. Apollo GraphQL

Contributing

Please read contributing guide for more information

Versioning

We use SemVer for versioning. For the versions available, see the tags in this repository.