Stator, Your Go-to Template for The Perfect Stack

Stator, Your Go-to Template for The Perfect Stack

stator solves all of this for you by using the latest technologies' most up-to-date standards. Indeed, this template is opinionated as to what's the best, but it does enforce excellent practices such as code re-usability, enforces coding guidelines, usage of a monorepo, etc.

Stator

Stator, your go-to template for the perfect stack.

🚀 Quick Start

The interactive CLI will guide you to easily setup your project.

npm run get-started

📚 About the Project

Have you ever started a new project by yourself? If so, you probably know that it is tedious to set up all the necessary tools. Just like you, the part I enjoy the most is coding, not boilerplate.

stator solves all of this for you by using the latest technologies' most up-to-date standards. Indeed, this template is opinionated as to what's the best, but it does enforce excellent practices such as code re-usability, enforces coding guidelines, usage of a monorepo, etc.

If you want more details about how this idea was implemented, I recommend reading the series of blog articles I wrote on the topic.

🦄 Demo Application

This template includes a demo todo application that serves as an example of sound patterns. Of course, you won't be creating a todo application for your project, but you can use this as an example of useful patterns and learn how to use the technologies presented in this project.

demo application

Technical Stack

Database Backend Frontend
Postgres Nest React
Mongo Fastify React Router
TypeORM Redux Toolkit
NestJs CRUD axios

💥 Getting Started

Prerequisites

Copy the template

This repository is a repository template, which means you can use the Use this template button at the top to create your project based on this.

use template button

*Note: If you have an existing repository, this will require more work. I would recommend using the use template button and migrating your current code to the newly created projects.

Make it yours

You will now want to make this project yours by replacing all organization and project naming occurrences with your own names. Thankfully, we have a script just for that:

npm run rename-project -- --organization {YOUR_ORGANIZATION_NAME} --project {YOUR_PROJECT_NAME}

*Note: I highly recommend that the project name is the same as your git repository.

The file will delete itself once it has been completed. On completion, you will see the following message:

project appropriation success

Run the application

First, install the dependencies:

npm i

Then, run the whole stack:

npm run postgres
npm start api
npm start webapp

Finally, why not test it:

npm test api && npm run e2e webapp-e2e

For a full list of available commands, consult the package.json.

Continuous Integration

This templates integrates Github Actions for its Continuous Integration. The existing workflows are under .github/workflows. To have the CI working, you must:

  1. (Optional) Link your repository with Coveralls, or with Codecov by inserting your CODECOV_TOKEN in github secrets.
  2. (Optional) Insert your Nx Cloud access token in github secrets under NX_CLOUD_TOKEN. This enables for caching and faster build times.

Deployment

The application can be deployed in two different ways, depending on your objectives.

Digital Ocean App Platform

For a simple and fast deployment, the new App Platform from Digital Ocean makes it easy to work with monorepos. For our todo app, the config file lies under .do/app.yaml. There, you can change the configuration of the different apps being deployed. The spec can be found here.

To deploy this full stack application yourself, follow the steps below:

  1. Create an account on Digital Ocean Cloud (this is a sponsored link) and enable Github access
  2. Install doctl CLI
  3. Run doctl apps create --spec .do/app.yaml
  4. View the build, logs, and deployment url here

Once done, your app will be hooked to master branch commits as defined in the spec. Therefore, on merge, the application will update. To update the spec of the application, first get the application id with doctl apps list, then simply run doctl apps update <app id> --spec .do/app.yaml.

Kubernetes

More to come..

⚙️ Implementation

Database

Postgres

There are 2 databases available, postgres and mongo. To ensure your developers don't get into any trouble while installing those, they are already pre-configured with docker-compose.yml files.

By default, the project uses postgres. If this is what you want, you're good to go; everything will work out of the box.

Migrations

By default, the automatic synchronization is activated between your models and the database. This means that making changes on your models will be automatically reflected on your database schemas. If you would like to control your migrations manually, you can do so by setting synchronize to false in orm-config.ts file.

Generate migration from your modified schemas:

npm run typeorm -- migration:generate -n {MIGRATION_NAME}

This will check the difference between models for your defined entities and your database schemas. If it finds changes, it will generate the appropriate migration scripts.

Run all pending migrations:

npm run typeorm -- migration:run

To get all the information on migrations, consult typeorm documentation.

If you would like to use mongodb, even though it is absolutely not recommended because it currently doesn't work well with typeorm, you can still do that by updating the connection info under ./apps/api/src/config/configuration.ts. You simply need to replace type: "postgres" with type: "mongo".

Data seeding

If you want your database to be pre-populated with that, it is very easy to do so. For postgres add your sql statements to apps/database/postgres/init.sql file. For mongo add your mongo statements to apps/database/mongo/mongo-entrypoint/seed-data.js file.

Backend

We are using cutting edge technologies to ensure that you get the best development experience one could hope for. To communicate with the database, we make use of the great typeorm. We use the code-first approach, which means defining your models will also represent your tables in your database. Here is an example:

import { Column, Entity } from "typeorm"
import { RootEntity } from "./root.entity"
import { MinLength } from "class-validator"

@Entity()
export class Todo extends RootEntity {
  @Column()
  @MinLength(5, { always: true })
  text: string
}

To serve your API requests, we make use of nest alongside with fastify to ensure blazing fast performance.

To reduce the boilerplate commonly found around creating a new entity, we are using the nestjsx/crud plugin that will generate all necessary routes for CRUD operations.

Here is an example from our todo app:

import { Controller } from "@nestjs/common"
import { Crud, CrudController } from "@nestjsx/crud"
import { Todo } from "@stator/models"

import { TodosService } from "./todos.service"

@Crud({ model: { type: Todo } })
@Controller("todos")
export class TodosController implements CrudController<Todo> {
  constructor(public service: TodosService) {}
}

Of course, you're probably wondering if this actually works. To convince you, we have implemented integration tests that perform real requests using supertest.

Can I view the generated endpoints? Well, of course, you can!

We now have generated swagger documentation that is viewable with the beautiful redoc.

Once you navigate to localhost:3333, you will see this:

redoc

Frontend

For our webapp, we're using the very popular react alongside redux-toolkit and react-router. We highly recommend that you use function components as demonstrated in the example.

To further reduce the boilerplate necessary for redux-toolkit we provide you with a thunkFactory which allows you to generate all actions needed for a CRUD endpoint.

Here is how you use it:

import { Todo } from "@stator/models"

import { thunkFactory } from "../utils/thunkFactory"

export const todoThunks = {
  ...thunkFactory<Todo>("/todos"),
}

We also provide a sliceReducerFactory that will generate the required reducers for the thunks you just created.

Here is how you use it:

import { Slice, createSlice } from "@reduxjs/toolkit"
import { Todo } from "@stator/models"

import { sliceReducerFactory } from "../utils/sliceReducerFactory"
import { SliceState, getInitialSliceState } from "../utils/SliceState"
import { todoThunks } from "./todos.thunk"

export interface TodoState extends SliceState<Todo> {}

export const todoSlice: Slice = createSlice({
  name: "todos",
  initialState: getInitialSliceState<TodoState, Todo>(),
  reducers: {},
  extraReducers: {
    ...sliceReducerFactory<Todo, TodoState>(todoThunks),
  },
})

As you can see, everything is typed adequately. Thus you will get auto-completion when developing.

Now let's say we want to fetch all our todos from our API, we can simply do this:

dispatch(todoThunks.getAll())

While the API is processing, we would like to add a loading. That is very easy because our thunkFactory handles all of this for us. You can access the loading status like this:

todoState.status.getAll.loading

For a complete example of CRUD operations, consult the app.tsx file.

In our example, we are using material-ui, but you could replace that with any other framework.

We also use axios to simplify our requests handling as it works very well with TypeScript.

General

We strongly believe that typing helps create a more robust program; thus, we use TypeScript.

To facilitate and optimize the usage of the monorepo, we make use of NX.

eslint enforces excellent standards, and prettier helps you apply them.

Commit messages must abide to those guidelines. If you need help following them, simply run npm run commit and you will be prompted with an interactive menu.

File and directory names are enforced by the custom made enforce-file-folder-naming-convention.js.

Branch names are enforced before you even commit to ensure everyone adopts the same standard: {issue-number}-{branch-work-title-kebab-case}.

For end to end testing, we use the notorious cypress.

We also have a pre-built CI toolkit for you that will build and run the tests.

Download Details:

Author: chocolat-chaud-io

Source Code: https://github.com/chocolat-chaud-io/stator

react reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.