Example Project With PostgreSQL, Express, and React

End-to-end React app backed by an Express API server, persisting data to PostgreSQL database. The project has a very simple interface that fetches data from a single table in the database, and allows you to add rows to that table.

See the app in action.

Prerequisites

Docker

This project relies on Docker to run the PostgreSQL server. You must install Docker first before continuing.

Use one of these methods:

Use Homebrew on macOS: brew install --cask docker
Follow the instructions on the Docker website

Once you've installed Docker Desktop, you'll need to launch the app. On macOS, it's located in /Applications/Docker.

Node

You'll need to install Node v14 or above. nvm is highly recommended.

Set Up the Development Environment

Install NPM Packages

npm install

Set Up `postgres` User Password and Database Name

We need to set up couple pieces of information in order to start a new PostgreSQL server instance, as well as to connect to it later from the Express server.

Copy the example environment file
```
cp .env.example .env
```
You can choose to edit .env or just use as-is.

See the PostgreSQL Docker image documentation for more information.

Initialize the Database

Let's set up the database server, create the application database, and seed it with some data. You only need to do this the first time you set up your development environment.

npm run db:init

ℹ️ If you ever need to start over with the database, you can run this command again which will delete your existing data and start from scratch.

Start the Development Environment

npm start

Visit http://localhost:3000.

Shut Down the Development Environment

Ctrl-C to stop the Express and React development servers.
npm run db:stop to stop and destroy the PostgreSQL Docker container. Don't worry, your data is safe.