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