Starter 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 basic interface that fetches data from a single table in the database, and allows you to add rows to that table.
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 and npm
You'll need to install Node v16 and npm v8 or above. nvm
is highly
recommended.
Create a New Repository From This Template
Generate a new repository from this template.
See GitHub documentation for more details.
Set Up the Development Environment
Install NPM Packages
npm install
postgres
User Password and Database Name
Set Up 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 stop
to stop and destroy the PostgreSQL Docker container. Don't worry, your data is safe.
Add Dependencies to Your Web App
At the project root, use the following command:
npm install ${package-name} -w app
E.g.
npm install ky -w app
Add Dependencies to Your Server
At the project root, use the following command:
npm install ${package-name} -w server
E.g.
npm install got -w server
psql
Session?
Need to Start a npm run psql
Want More Details?
Deployment
Read about setting up and deploying to Heroku.
Examples Implemented Using This Template
- Adding a new feature step-by-step
- Store binary data in PostgreSQL
- Eventonica
- Integrate Auth0
- Integrate Google Calendar
Contributors ✨
Thanks goes to these wonderful people (emoji key):
Abigail Edwards 🐛 🤔 💬 📓 |
Andrew Peterson 💻 🧑🏫 |
Avery 🚇 👀 📓 |
Brie Klassen 🐛 📖 🤔 💬 👀 📓 |
George Song 💻 📖 🚇 🚧 |
Jen Huynh 🐛 📓 |
Meia 📖 |
Shaylan7 🐛 |
Tabitha O'Melay 🐛 💬 👀 |
Tara Larsen 🐛 |
Xiao Zhong 💬 📓 🐛 |
ZelmaSedano ✅ |
This project follows the all-contributors specification. Contributions of any kind welcome!