Shared-express-server NPM

React Express Template

Full-stack template using React and Express with built-in authentication. A simplified setup.

Note: Read this article for an explanation of the concepts behind the Express/React setup.

Installation

# Clone the repository
git clone git@github.com:dais-technology/react-express-template.git

# Install the dependencies
npm i

First Use Instructions

Replace all instances of react-express-template with your app name.
Update scripts/templateValues.yaml so it's specific to your app
Update server/config/sdk.js with your app's name to pull the proper secrets.
Add the secrets for your application in DAIS hub.

Running the Application

Development

In development mode, two servers will be running concurrently:

Webpack serving React on localhost:3000
Express serving the backend on localhost:5000

Express (via nodemon) will reload on any update to the server directory, and Webpack will refresh on any change to the client directory.

Start development mode

# Concurrently start both servers
npm run dev

Production

Only one server will be running in production mode. Webpack will bundle all the client side files and Express will serve the entire client app from the / route on localhost:5000.

Build and start production server

# Build the client
npm run build

# then start the server
npm start

Features

Automation and CI/CD

Full set up for CI/CD without any hassle. Builds, deploys, and analyzes in under 3 minutes.

Jenkinsfile
Dockerfile
Sonar Scanner

Testing

Fully tested - over 90% coverage out of the box.

React component testing library
Express supertest library
Jest unit testing

Login

Login page
- Reset temporary password
- Accept EULA
Forgot password page
Reset password page
Log out
Dashboard

Routing

Protected routes
Public routes

Authentication and security

Preauthorizes users based on access token and refresh token
Automatically refreshes access token based on refresh token
Uses same site, secure, HTTP only cookies
Client never sees SDK configuration, real API paths and URLs, or access tokens
Pulls secrets from secrets manager, instead of hard-coded env files

Miscellaneous

Full ESLint support
Prettier support
Conventional and customizable Webpack setup - no magic
Sass integration for styling
Semantic UI components

Tests

Run the tests

npm run test

Aliases in tests

We use the babel-plugin-module-resolver plugin to simplify import paths in our client tests. See the .babelrc file for an example alias config, if you'd like to add more. In order to keep autocomplete and go-to-source functionality in IDEs, be sure to follow these steps when updating or adding an alias.

Frontend Build Analysis

If you want to analyze the prod webpack output, run npm run webpack-prod-stats, take that output and head over to webpack.github.io/analyse, which is the official webpack analysis tool. Other analysis tools can be found here.