This repo contains all the projects required to create and run the FA application. The client web project is based off the create-react-app starter project. That was used as a base with additional useful libraries and options enabled.
This repo is organized into three separate projects, one for the React client, one for the backend server API, and one for all the (AWS) Infrastructure to run and deploy everything. This is based off this article with some slight changes to the folder layout. I didn't want any coupling between the API and client, so they are in totally separate folders to allow zero cross-over. One can be totally replaced without knowledge to the other.
Start scripts/etc are currently not cross-platform compatible. The current setup supports macOS / Linux.
The package.json file in the ROOT folder is present mainly to support npm scripts to run the development environment.
First the dependencies must be installed, run the following install commands:
yarn install
cd client && yarn install && cd ..
cd api && yarn install && cd ..Edit package.json and set "proxy": "http://localhost:3001/"
yarn start - This starts both the API server and the react client webpack server. It utilizes concurrently to run both servers in parallel in a single command window.
Install docker NOTE: Config values for some container parameters (ie. db) are set up using env files.
NOTE 2: If you get errors about certain npm libs not building correctly, it could be that the node_modules folder
from the host machine was copied to a docker container. Delete the node_modules folder on the host in the api
and client folders and then recreate the containers.
NOTE 3: Note that switching branches on the host is prone to crashing the docker services especially if new
packages have been added to either the api or client folders. It is advisable to docker-compose stop && docker-compose up --build
after switching branches.
From the root folder run:
# Optionally, pull public postgres docker library
docker pull postgres
# to start both the api and client containers
docker-compose up --buildUse the following command to shell into a docker - for example to open a shell in the api container:
bash -c "clear && docker exec -it reactapipoc_api_1 sh"The API server presents a GraphQL endpoint via /graphql. The GraphiQL browser
is also accessible via http://localhost:3001/graphiql
An introduction to GraphQL language and schema syntax definitions can be be found here.
This project uses Apollo graphql-tools to define graphQL schemas in the schemas folder.
- Server API powered by Express
- Auth0
- React Router v4
- React Semantic UI
- Docker
- Postgres 9.6
- Webpack3 with babel on the API for ES6/ES7 language features
- Apollo GraphQL Server Express integration
- Auth0 automatic token renewal
This is a basic TODO list of additional libraries and enhancements I want to add to this POC to get it closer to a true starting point for a new project.
- Integrate express as API server
- Enhance Auth0 integration with SPA / API guide
- perms - Authorization Extension. Create perms, assign to roles, then create Rule to enforce scopes requested.
- Automatically Add new User (after Sign Up) to Auth0 Role
- Database migrations framework - knex
- Enhance automatic token renewal implementation with better silient.html. Inject variables from server. Also currently redirects back to homepage.
- Secure API with JWT verification
- Implement login page with custom Lock implementation
- CSS (Stylus) preprocessor integration
- flow - Currently integrated but not fully covered
- Restart express server on code changes. Maybe nodemon
- CI/CD Set up
- Google Tag Manager / Google Analytics - Possible page tracking option
- Better Handling of ENV variables for multiple environments