mikelax / react-api-poc

Starting POC of web app with react, express, api, auth0, and basic library integrations

Overview

This repo is a POC for a quickstart web project that is based off the create-react-app starter project. That was used as a base with additional useful libraries and options enabled. The goal is to continue utilizing create-react-app without needing to eject.

Details

This repo is organized into two separate projects, one for the React client, and the other as the backend server API. 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. Current set up supports Mac OS / Linux.

How to run - on the host

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.

How to run - using docker

Install docker NOTE: Config values for some container parameters (ie. db) are set up using env files.

From the root folder run:

# Pull public postgres docker library
docker pull postgres

# only required for this first build or when a Dockerfile is edited
docker-compose build 

# to start both the api and client containers
docker-compose up

Use 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"

GraphQL

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.

Additional Libraries & Integrations

• Server API powered by Express
• Auth0
• React Router v4
• React Bootstrap
• Docker
• Postgres 9.6
• Webpack3 with babel on the API for ES6/ES7 language features
• Apollo GraphQL Server Express integration
• Auth0 automatic token renewal

TODO

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 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

Futher Reading

• https://auth0.com/docs/architecture-scenarios/application/spa-api