jagmitg/pern-template

Lightweight PERN template with built-in Passport authentication.

PERN Template

Lightweight PERN template with built-in Passport authentication.

Table of Contents

• PERN Template
  • Table of Contents
  • About The Project
    • Technology Stack
    • Directory Structure
  • Getting Started
    • Prerequisites
    • Installation
  • Contributing
  • License
  • Contact
  • Acknowledgements

About The Project

This project is boilerplate code that has been built using a PERN stack (PostgreSQL, Express, React, Node) which includes Passport middleware and JWT for its authentication. The template has been written in Typescript, uses Material UI for its design system and Redux for its state management.

Technology Stack

Library	Description
PostgreSQL	Relational database
Express	Web application framework
React	Component-based UI
Node	Server-side JavaScript
TypeScript	Typed superset of JavaScript
Passport	Authentication middleware
JWT	Access tokens
BCrypt	Hash passwords
Axios	HTTP client
Redux	State management
Material-UI	Design system
Husky	Pre-commit hooks
Prettier	Auto code formatting

Directory Structure

.
├── client                  #front-end
│   ├── src
│   │   ├── components      #react components
│   │   ├── config          #axios settings
│   │   ├── pages           #page level components
│   │   ├── redux           #state management
│   │   │   ├── actions     #send data to redux store
│   │   │   └── reducers    #respond to action state changes
│   │   └── utils           #utilities
│   │       └── validation  #validation utilities
│   └── public              #html template
│
└── server                  #back-end
    ├── src
    │   ├── config          #db and passport settings
    │   ├── controllers     #interface between routes and db
    │   ├── middleware      #authorise protected requests
    │   ├── models          #db queries
    │   └── routes          #express api routes
    └── .env                #server config file

Getting Started

To get this project up and running, ensure the prerequisites have been met and then follow the installation steps below.

Prerequisites

• Node
• NPM
• PostgresSQL

Once PostgreSQL has been installed, create a new database with a users table:

CREATE DATABASE pern_template;

CREATE TABLE users (
  user_id SERIAL PRIMARY KEY,
  username VARCHAR UNIQUE NOT NULL,
  password VARCHAR NOT NULL,
  first_name VARCHAR NOT NULL,
  last_name VARCHAR NOT NULL,
  email VARCHAR UNIQUE NOT NULL
);

Installation

1. Clone repository

git clone https://github.com/t-blackwell/pern-template.git

2. Install node modules in root, client and server directories

npm install

3. Add configuration file .env to server directory

NODE_ENV=development
PORT=5000
ACCESS_TOKEN_SECRET=secret_one
REFRESH_TOKEN_SECRET=secret_two
PGHOST=localhost
PGUSER=postgres
PGPASSWORD=password
PGDATABASE=pern_template
PGPORT=5432

4. Reinitialise Git

rm -rf .git
git init

5. Fire it up

npm run dev

Contributing

Contributions to this project are welcome and appreciated.

1. Fork the project
2. Create your feature branch (git checkout -b feature/NewFeature)
3. Commit your changes (git commit -m 'Add some NewFeature')
4. Push to the branch (git push origin feature/NewFeature)
5. Open a pull request

License

Distributed under the ISC License.

Contact

Any questions, suggestions or contribution ideas, please feel free to send me an email.
- Tom

Acknowledgements

This template was originally built using the pern-stack-typescript repo, special thanks to gandh99 for his help.