Node/Express and React Starter Project

A starter template for a Node/Express and React project.

Requirements

• Node 12
• Docker Desktop
  • Required only if you need to create a Docker image and to run the Docker image locally.

Setup

• npm run setup

Development

Start Dev Environment

• npm run start
• Open browser to http://localhost
• To run on specific port:
  • PORT=4242 npm run start
  • Open browser to http://localhost:4242

Server Code

Stater code is located in server/src/server.ts

React Code

Stater code is located in:

• react/src/App.tsx
• react/src/components/HelloWorld/index.tsx

You can load images as shown in the index.tsx file.

Shared Folder

The Shared folder is where you can place shared files (ex. types, interfaces, enums...etc).

You can import them in either project using: '@shared/'.

Example: import { SocketMessage } from '@shared/Message';

Websockets

The project shows a very basic example of a Websocket connection between the Node server and React app. Code is located in:

• server/src/server.ts
• react/src/components/HelloWorld/index.tsx

Build

• Build for Production

  • npm run build
  • This will create a folder called 'dist' in this directory with two folders 'server' and 'react'.
  • To run:
    • node ./dist/server/dist/server.js
    • Open browser to http://localhost
  • To run on specific port:
    • PORT=4242 node ./dist/server/dist/server.js
    • Open browser to http://localhost:4242

• Build for Docker

  • npm run build
  • docker build -t sage3/nodeserver .
  • docker run -p 80:80 -d sage3/nodeserver
  • Open Browser to http://localhost
  • To run on specific port:
    • docker run -p 4242:80 -d sage3/nodeserver
    • Open Browser to http://localhost:4242