Project Summary:

This is a template for a simple notes application. It has a complete frontend and backend which connects to a Mongo DB server. It features user context support with JWT and Bcrypt. This project is intended to be used as a template for projects requiring a setup frontend and backend with user support. This is a MERN project. Ensure that you remember to npm install all dependencies on the front and backend.

Info to get started:

You can clone this project locally like so: git clone https://github.com/lizjadejohnson/reactMasterUserAuth.git *YOURPROJECTNAME*
Ensure that you remember to install all dependencies for the root/frontend/backend. From the root directory run: npm run install-all
Thanks to Concurrently this will ensure all dependencies are up to date as well as build the frontend.
npm run dev will then spin up the front and backend servers in local development.
Backend: 3000 Frontend: 5000 (Proxy setup on the vite config) VISIT http://localhost:5000/

.env:

Remember to create a new .env file in the backend directory!
It should look like:
PORT=3000
DB_URL=mongodb+srv://MONGOUSERNAME:YOURCLUSERPASSWORD.STRING.mongodb.net/DBNAME
JWT_SECRET=WHATEVERYOUWANTYOURSECRETKEYTOBE
NODE_ENV=development
A frontend env file is not necessary with this set up. You will need to ensure you utilize the config.js file, however.

The current project is setup so that Concurrently runs the backend and frontend locally with npm run dev and if you have a Render setup you can run it in production. The Render site is not required to run locally following all previous instructions. IMPORTANT: This project assumes you have a parent directory for your project which houses a backend directory and a frontend directory within it.

From here, if you have followed all steps above, you should have a working local development app. You can choose to follow the rest of the instructions to launch a Render app.

RENDER INFO:

First, ensure you have followed all previous instructions to have Concurrently and have all the package.json's, index.js and everything else set up correctly as done here.
Create / log in to a Render account: https://dashboard.render.com/
Set up your backend project in Render:
a. Click the New + button.
b. Choose Web Service. This will be to build out our backend. Our backend will be serving the frontend. This will be 1 project in Render!
c. Build from a GitHub repository
d. Set region, leave branch as master, leave the root directory blank, leave most settings how they are, etc. Name the project as what you would want your primary URL to be, the URL is generated based on the name.
e. Change the "build command" to: cd frontend && npm install --include=dev && npm run build && cd ../backend && npm install --include=dev && cp -R ../frontend/dist ./public
f. Change the "start command" to: cd backend && npm start
g. Add the backend-only environment variables from the backend .env (it allows you to copy and paste for ease). Add environment variables from the backend .env you have in your local file (it allows you to copy and paste for ease). These should be the DB_URL, the JWT_SECRET and the PORT.
Note: We do not need to add the local host env variable because it doesn't apply to our production site.
IMPORTANT: Locally our NODE_ENV is set to development. Only in Render (not locally) you will want to add a key of NODE_ENV with a value of production.
(So that is 4 total env settings for the back end on Render.)
Add your Render page's URL to your CORS configuration in your backend's index.js:
const allowedOrigins = isProduction ? ['https://react-auth-template.onrender.com'] : ['http://localhost:5000', 'http://localhost:3000'];
Be sure to add your Render site to your Mongo whitelist - In Mongo:
a. Access Network Access Settings:
b. In the left-hand navigation, click on "Network Access" under the "Security" section.
c. Click the "Add IP Address" button.
d. Add each IP address provided by Render. You can access these in your Render project by selecting the "Connect" button in the upper right. It provided me with 3 different outbound IP addresses.
Again, in Render you will use the build and start commands specified above. Locally, you will start with npm run dev.

At this point, you should have a fully functional frontend, backend, local development and production site using Render.
Again, if you are working in development and want to be seeing all your changes in real time in your localhost, you will use the command:
npm run dev from the parent directory and visit localhost:5000
If you clone this project and want to ensure all dependencies are set up, from root you'll need to remember to first run:
npm run install-all
Good luck!