/data-storage-example-app

Example of various data storage options in a React client and express.js server.

Primary LanguageJavaScript

Data Storage Example App

Back-end badge Front-end badge

This repository contains a client app built with React and a server app built with Express.js.

The front-end and back-end code together show how to use simple Cookie and LocalStorage technologies - data storage tools available within the web browser. We also show how to deal with login and authorization using JWT.

Both the front-end and back-end are optionally containerized using Docker.

Run the front-end

Navigate into the front-end directory and...

Setup environmental variables

Copy the file named .env.example into a new file named simply, .env.

Make sure the REACT_APP_BACKEND setting in this file specifies the correct domain and port where the Express back-end app is running.

REACT_APP_BACKEND=http://localhost:3000

Note that the React server will have to be completely stopped and re-started if you change these variables while it is running.

Install dependencies

npm install

Start the front-end app

npm start

Note the port that the React app starts on... you'll need this in setting up environmental variables for the back-end.

Start the front-end app as a container

Alternatively, the front-end can be started as a Docker container.

First, make sure Docker has been installed locally, and then run:

docker run -p 4000:4000 -d bloombar/data-storage-example-app-front-end

The containerized front-end app should now be running as a background daemon on http://localhost:4000.

Run the back-end

Navigate into the back-end directory and...

Setup environmental variables

Copy the file named .env.example into a new file named simply, .env.

Make sure the FRONT_END_DOMAIN setting in this file specifies the correct domain and port where the React front-end app is running.

FRONT_END_DOMAIN=http://localhost:3001

Install dependencies

npm install

Install nodemon

Use the -g flag to install nodemon globally:

npm install -g nodemon

Start the back-end app

Start the express server using nodemon:

nodemon server

Start the front-end app as a container

Alternatively, the back-end can be started as a Docker container.

First, make sure Docker has been installed locally, and then run:

docker run -p 3000:3000 --restart unless-stopped -d bloombar/data-storage-example-app-back-end

The containerized back-end app should now be running as a background daemon on http://localhost:3000.

Try it out

Front-end

Open the front-end (http://localhost:4000) in your favorite web browser (this should have popped open automatically, unless running the containerized version of the app). Open the browser's Developer Tools:

  • use the Console tab to see any debugging output from the Javascript code running in the browser.
  • use the Network tab to see details of all HTTP requests and responses to/from the back-end server. In particular, look at the cookie and authorization-related HTTP headers.

Back-end

Watch the debugging output on the back-end to show incoming requests and their response codes.

Test it

Unit tests built with mocha and the chai assertion library (with the chai-http plugin to simplify testing back-end routes) are included for the back-end. Code coverage analysis is provided by the nyc module. The package.json file contains scripts to run both.

Run unit tests:

npx mocha

Run code coverage:

npm run coverage