Cookiecutter for Express and React Server-side Rendering

An opinionated cookiecutter template that will help you to quickly set-up a starter code for building your server-side rendered Express with React web application. The web app produced uses React server-side rendered with Express written in Typescript. This template is the basis of my personal projects.

Reference app generated from cookiecutter

Reference app: https://github.com/ardydedase/express-react-ssr-reference

Deploy reference app to Render:

Specs

• Starter code in Typescript.
• Tested on:
  • npm >=6
  • node >=12

Structure and sequence

Node API endpoint

Everything under /api

Web pages rendered

NodeAPI object is the Node API endpoint above.

What's included

• Use Express and React.js
• Uses webpack and babel for bundling and transpiling.
• Handlebars for templating.
• node-config to load configuration files.
• Jest for testing.
• Go live with a Continuous Deployment Pipeline using GitHub and Render's Infrastructure as Code. A sample IaC file can be found here.

What's NOT included

• Custom CSS setup. Relies on bootstrap v4.

Cookiecutter values

• GitHub username.
• Project / service name deployed to Render.
• Google Analytics ID for tracking (optional).

Usage

1. Install cookiecutter. Run the command below or follow the instructions here.

   pip install cookiecutter
   

2. Cookiecut the template

   cookiecutter git@github.com:ardydedase/cookiecutter-express-react-ssr.git
   

3. Enter the values accordingly. Take note of your project name. The project slug will be based on the project name. Replace the default values with your own.

   github_username [ardydedase]:
   project_name [Express React SSR Reference]:
   project_slug [express-react-ssr-reference]:
   project_short_description [My reference web app.]:
   version [0.1.0]:
   google_analytics_id [UA-XXXX-Y]:
   

4. Change the working directory to the generated folder, same name as the project slug.

   cd <project_slug>
   

5. Take a look at the directory structure and the files.

   ls -al
   

Development

Refer to the README.md file generated by cookiecutter in the Reference App Repo.

References

• React Server-side Rendering
• Node Configuration
• Using Jest
• Production best practices: performance and reliability