PERN Boilerplate

? WORK IN PROGRESS ?

upcoming features:

• Email confirmation
• Socials Login

Features

• GraphQL Server
• JWT Authentication
• Auto refresh access tokens on expire
• Schema generation for client side (server schema stays in sync with client schema)

Tech Stack

Client

• React + Vite
• Apollo GraphQL
• TailwindCSS (css utility framework)
• MobX (state-management)
• Formik (form handlers)

Server

• express + apollo-server-express
• Postgres (database)
• TypeORM (ORM)
• class-validator
• argon2 (password encryption)
• GraphQL endpoints (also compatible with REST)

Prerequisites

1. Node (Download)
2. Postgres (Download)
3. optional Yarn (npm install)

Usage

1. Clone the repository

    git clone --depth 1 https://github.com/princejoogie/pern-boilerplate.git <project-name>

Server

1. Install dependencies

    cd ./<project-name>/server && npm install
    # or
    cd ./<project-name>/server && yarn

2. Setup ormconfig.json

    # replace those with "< >" to how you setup your postgres
    {
        "type": "postgres",
        "host": "localhost",
        "port": 5432,
        "username": <postgres-username>,
        "password": <postgres-password>,
        "database": <db-name>,
        "synchronize": true,
        "logging": true,
        "entities": ["src/entity/**/*.ts"],
        "migrations": ["src/migration/**/*.ts"],
        "subscribers": ["src/subscriber/**/*.ts"],
        "cli": {
            "entitiesDir": "src/entity",
            "migrationsDir": "src/migration",
            "subscribersDir": "src/subscriber"
        }
    }

3. Create Postgres database
   • make sure to add postgres bin to environmental variables

    createdb <db-name>
    # or run the recreate sciprt
    npm run schema:drop # !WARNING - this will recreate the database so only run this initially

4. Setup .env and .env.development

    # Content of .env and .env.development should have these 4 variables
    PORT=4000
    BASE_URL=http://localhost
    ACCESS_TOKEN_SECRET=access_token_secret_here
    REFRESH_TOKEN_SECRET=refresh_token_secret_here

5. Initialize migrations

    npm run migration:create && npm run migration:run

6. Start the server

    npm run dev

Client

1. Install dependencies

    cd ./<project-name>/client && npm install
    # or
    cd ./<project-name>/client && yarn

2. Run the generate script to sync server schema to the client

    npm run gen

3. Start the server

    npm run dev

Preview

Client

Server

Prince Carlo Juguilon

GitHub

https://github.com/princejoogie/pern-boilerplate