Icon provided by: By Devin Kira Murphy [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

Express/Passport with React

This version uses React to control the login requests and redirection in coordination with client-side routing.

We STONGLY 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.

Prerequisites

Before you get started, make sure you have the following software installed on your computer:

Create database and table

Create a new database called prime_app and create a person table:

CREATE TABLE person (
    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

Download (Don't Clone) This Repository

Don't Fork or Clone. Instead, click the Clone or Download button and select Download Zip.
Unzip the project and start with the code in that folder.
Create a new GitHub project and push this code to the new repository.

Development Setup Instructions

Run npm install
Create a .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: https://passwordsgenerator.net/. 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.
Start postgres if not running already by using brew services start postgresql
Run npm run server
Run npm run client
Navigate to localhost:3000

Debugging

To debug, you will need to run the client-side separately from the server. Start the client by running the command npm run dev: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.

Linting

The Airbnb ESLint for react is a part of this project. If you would like to take advantage of this in VS Code, you can add the ESLint extension. Click the Extensions button (the button right below the Debug) and search for ESLint. Click install for the first result and then click Reload. Then it should be all set up!

Production Build

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.

Start postgres if not running already by using brew services start postgresql
Run npm start
Navigate to localhost:5000

Lay of the Land

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

Deployment

Create a new Heroku project
Link the Heroku project to the project GitHub Repo
Create an Herkoku Postgres database
Connect to the Heroku Postgres database from Postico
Create the necessary tables
Add an environment variable for SERVER_SESSION_SECRET with a nice random string for security
In the deploy section, select manual deploy

johnnypackard/msp-trans-resources-copy