/decoupled-pern-jwt-auth-template-front-end-ts

A basic template for a front-end React application written in TypeScript that, when combined with a back-end template, can aid in constructing PERN stack apps that utilize JWT authentication.

Primary LanguageTypeScript

Decoupled PERN Stack with JWT Auth Template - Front End

This is the front end of a decoupled PERN Stack app that includes JWT Authentication.

When combined with the back end found here, you'll have all you need to build a full stack PERN app!

Use this to go build things! 🚀

To Use This Template

Replace <name-of-your-app-here>, including the < and > in the commands below with the name of your app!

git clone https://github.com/SEI-Remote/decoupled-pern-jwt-auth-template-front-end-ts <name-of-your-app-here>-front-end
cd <name-of-your-app-here>-front-end
code .

With the project open in VS Code, open a terminal and run:

rm -rf .git

Here's what your command line output should like after this step (note that the indicator that we are in a git repository is gone!)

The command line before and after running the rm -rf .git command. Before git:(main) is visible indiating that the directory contains a git repository, after the command it is not.

Re-initialize a git repository:

git init

Create a repo for this project on GitHub and add that remote to your project with:

git remote add origin your-repo-URL-here

Run npm i to fetch the template's dependencies:

npm i

touch a .env file:

touch .env

Fill it with the following:

VITE_BACK_END_SERVER_URL=http://localhost:3001

🚨 DO NOT place secrets in this .env file. The contents of this file WILL be exposed to site visitors. We are only using the front-end .env to create variables specific to the environment the application is running in.

Ensure the project starts up with:

npm run dev

Delete this README.md, then make an initial commit:

git add .
git commit -m "initial commit"
git push origin main

You're done!