This version uses React, Redux, Express, Passport, and PostgreSQL (a full list of dependencies can be found in package.json
).
We STRONGLY recommend following these instructions carefully. It's a lot, and will take some time to set up, but your life will be much easier this way in the long run.
Use this Template
button, and make a copy to your personal account. Make the project PUBLIC
!Before you get started, make sure you have the following software installed on your computer:
Create a new database called prime_app
and create a user
table:
CREATE TABLE "user" (
"id" SERIAL PRIMARY KEY,
"username" VARCHAR (80) UNIQUE NOT NULL,
"password" VARCHAR (1000) NOT NULL
);
If you would like to name your database something else, you will need to change prime_app
to the name of your new database name in server/modules/pool.js
.
npm install
.
package.json
to see which dependencies you'll need to add..env
file at the root of the project and paste this line into the file:SERVER_SESSION_SECRET=superDuperSecret
While you're in your new .env
file, take the time to replace superDuperSecret
with some long random string like 25POUbVtx6RKVNWszd9ERB9Bb6
to keep your application secure. Here's a site that can help you: Password Generator Plus. If you don't do this step, create a secret with less than eight characters, or leave it as superDuperSecret
, you will get a warning.
brew services start postgresql
.npm run server
to start the server.npm run client
to start the client.localhost:5173
.To debug, you will need to run the client-side separately from the server. Start the client by running the command npm run client
. Start the debugging server by selecting the Debug button.
Then make sure Launch Program
is selected from the dropdown, then click the green play arrow.
To use Postman with this repo, you will need to set up requests in Postman to register a user and login a user at a minimum.
Keep in mind that once you using the login route, Postman will manage your session cookie for you just like a browser, ensuring it is sent with each subsequent request. If you delete the localhost
cookie in Postman, it will effectively log you out.
npm run server
to start the server.Import
in Postman. Select the file.Collections
and Send
the following three calls in order:
POST /api/user/register
registers a new user, see body to change username/password.POST /api/user/login
will login a user, see body to change username/password.GET /api/user
will get user information, by default it's not very much.After running the login route above, you can try any other route you've created that requires a logged in user!
Before pushing to Heroku, run npm run build
in terminal. This will create a build folder that contains the code Heroku will be pointed at. You can test this build by typing npm start
. Keep in mind that npm start
will let you preview the production build but will not auto update.
brew services start postgresql
.npm start
.localhost:5173
.There are a few videos linked below that show a walkthrough the client and sever setup to help acclimatize to the boilerplate. Please take some time to watch the videos in order to get a better understanding of what the boilerplate is like.
Directory Structure:
src/
contains the React application.public/
contains static assets for the client-side.build/
after you build the project, contains the transpiled code from src/
and public/
that will be viewed on the production site.server/
contains the Express App.This code is also heavily commented. We recommend reading through the comments, getting a lay of the land, and becoming comfortable with how the code works before you start making too many changes. If you're wondering where to start, consider reading through component file comments in the following order:
SERVER_SESSION_SECRET
with a nice random string for security.Customize this ReadMe and the code comments in this project to read less like a starter repo and more like a project. Here is an example: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2.