teamstarter/gsg-boilerplate

A boilerplate to quickly get started with graphql-sequelize-generator using ES2016.

gsg-boilerplate

This project is a boilerplate to quickly get started with graphql-sequelize-generator.

It's a simple To Do list app based on this codepen that allows you to manage tasks (create, update, delete, count).

Getting Started

First you need to clone the project.

$ git clone git@github.com:teamstarter/gsg-boilerplate.git

This project uses the 12.18.1 version of Node. You can switch to the right version using nvm. Install nvm if you don't have it

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

Then choose the rigth version

$ nvm use

Then install all the dependencies of the project

$ yarn

Then you need to initialize the database before starting the project. It is configured by default with an sqlite database as described in ./config/config.json. The following command will create or replace the ./data/database.sqlite and run the migrations and the seeds.

You can use any Sequelize-compatible database (Postgresql, MySQL, etc...)

$ yarn db-reset

Once the database is initialized, you can run the project

$ yarn dev

You can then test the app at this address: http://locahost:3000.

The Server

It's a node server written in Typescript. It generates a GraphQL schema based on a few declarations of queries, mutations and subscriptions.

graphqlSchemaDeclaration.task = {
  model: models.task,
  actions: ['list', 'create', 'update', 'delete', 'count'],
  subscriptions: ['create', 'update', 'delete']
}

GSG requires a task model (in the models folder), to work with the above configuration.

export default function Task(sequelize) {
  var Task = sequelize.define(
    'task',
    {
      id: {
        type: DataTypes.INTEGER,
        primaryKey: true,
        autoIncrement: true
      },
      name: {
        type: DataTypes.STRING,
        allowNull: false
      },
      active: {
        type: DataTypes.BOOLEAN,
        allowNull: false
      }
    },
    {
      sequelize,
      freezeTableName: true,
      modelName: 'task',
      paranoid: true,
      timestamps: true
    }
  )

  return Task
}

The server generates an endpoint (/graphql) to execute get/post queries from the app.

The App

This boilerplace uses React. It was initialized using create-react-app.

The app uses apollo (the @apollo/client package) which allows you to quickly send queries to the server to get or send data. In the following example, the query gets a list of tasks.

const GET_TASKS = gql`
  query GetTasks($order: String, $where: SequelizeJSON) {
    task(order: $order, where: $where) {
      id
      name
      active
    }
  }

Available Commands

In the project directory, you can run:

yarn dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser while reloading if you make edits.

The yarn dev command runs the app and the server with pm2.

yarn db-reset

Creates a sqlite database file in the data folder and runs the migrations and seeds. If the database file already exists the file is replaced by a new one. This command is useful to clean the database and get a default one.

./node_modules/.bin/pm2 log

Use this command to print logs in the terminal. It's useful to have some realtime logs when you need to debug your app.

./node_modules/.bin/pm2 delete all

This command will stop your app.

Learn More

You can learn more about graphql-sequelize-generator here.

To learn React, check out the React documentation.

To learn Graphql, check out the GraphQL documentation

You can learn more about pm2 here