React Fullstack Template

This repository contains a project template for React/NodeJS development

1. Features
2. Getting Started
3. Application Structure
4. Development
5. Deployment
6. Linting and Formatting
7. History

Features

• react
• react-router
• emotion
• flow
• webpack
• babel
• eslint
• prettier
• nodemon
• koa

Getting Started

Note: node 7.6 or later is required for this template to work since it uses ES6 generators

Setup directory for project:

git clone git@github.com:nwaywood/react-fullstack-template.git <your-project-name>
cd <your-project-name>
rm -rf .git

From the root directory, install the project dependencies and check that it works:

npm install           # install dependencies
npm run serve         # run the server

and then from another terminal:

npm start             # compile and launch

Application Structure

.
├── app                            # Frontend application
│   ├── public                     # Static resources (html, images etc)
│   └── src                        # Source code, which is bundled into the `dist` folder by `webpack`
│       ├── index.js               # The entrypoint for the React application
│       ├── AppErrorBoundary.js    # Generic top level Error Boundary for the application
│       ├── globalCSS.js           # Any global CSS used in the application (should be kept to a minimum)
│       └── ...                    # Domain specific components
├── dist                           # Build directory, which is served by the server as static directory
└── server                         # Root folder for server code

Note: The structure of domain specific components within /src follow the presentational vs component model. Refer to this blog post for more information

Development

npm start

to start the development server. And to communicate with the api:

npm run serve:watch

and the devServer will proxy api calls to the backend koa server... magic!

Deployment

npm run build          # compile project into /dist folder

then you can serve the production app with

npm run serve

By default the production server listens on port 3000

If you want to run the application on port other than 3000, simply define it as environment variable:

PORT=4000 npm run serve

Docker

Build the docker image:

docker build -t YOUR_IMAGE_NAME .

Run the container:

docker run -it -p 3000:3000 --name YOUR_CONTAINER_NAME YOUR_IMAGE_NAME

Linting and Formatting

This project uses prettier integrated with eslint to show formatting errors via eslint. To automatically fix these formatting errors you can run npm run format. However, it is recommended to integrate this functionality with your editor to improve the development workflow.

History

For an overview of the evolution of this template and key design decisions we have made, see here