Skip to content
This repository has been archived by the owner on Mar 11, 2021. It is now read-only.

Latest commit

 

History

History
77 lines (59 loc) · 2.81 KB

README.md

File metadata and controls

77 lines (59 loc) · 2.81 KB
Raw

ReactJS Express Docker Starter

This is an opinionated starter/boilerplate project for a ReactJS Single Page Application. We are using:

  • React V16, with prop-types for prop validation
  • React Router V4

Also,

  • The ES6/JSX code is transpiled via Babel,
  • We support Linting via ESLint,
  • We run Unit Tests using Jest and Enzyme,

Lastly, We are using

  • Webpack to bundle modules and
  • NPM scripts to run the build processes.

A running version of this app is deployed in Heroku: https://lit-savannah-37543.herokuapp.com. We are using free dyno(s) to run the app, so in case the url is unresponsive/takes too long to open, kindly be patient and/or try reloading the page. 🙏

Getting Started

  • Checkout the repository
  • Install the dependencies
  • [Optional] Add an environment settings file (see notes below)
  • [Optional] Build the ReactJS application using Webpack
  • Start the web server
> git clone https://github.com/sntnupl/reactjs-express-docker-starter.git  
> cd src  
> npm install

The following command is optional, do this only if you make changes to this repository

> npm run build:prod

This will start the Express Server that will serve the ReactJS application.

> npm run serve

Deploy the app as a container

This project comes with a Dockerfile, that is required to deploy the app as a container.
To build the container, run the following commands (assuming you have docker installed in your setup)

> cd src  
> docker build -t <image-name of your choice> .  
> docker run -p 5000:5000 -d <image-name of your choice>

Other Commands

Note, all of the following commands should be run from src directory.

  • Run ESLint:
    • npm run lint, or
    • npm run lint -- --watch for watch mode
  • Run Unit Tests:
    • npm test, or
    • npm test -- --watch, for watch mode, or
    • npm test -- --silent --watch if in addition, you do not want to see the console logs
  • Run a 'DevBuild':
    • npm run build:dev - this runs in watch mode, perfect for rapid development 🙌

Adding an Environment Settings file

Instead of hard-coding the host address, port number etc, our application reads them from an environment settings file.
A sample file is located at src/settings/sample.env, which you can use to create a settings.env in src/settings directory, based your specific requirements.

Note, this is required only if you wish to make changes to the application, which would need you to rebuild the application.

A quick note on 'WEATHER_API_KEY'
Our application uses Openweathermap API to get the weather information.
Usage of these APIs requirs registration on their web site, which would provide you access to an API key.