React Express Vite TypeScript Boilerplate

The React Express Vite Boilerplate is a starting point for building a full stack Express JS application with a React front-end. It uses Vite as the framework to build, run and serve the application.

Install

npm install

Install only what is needed for the web application.

Env Variables and Modes

Vite exposes env variables on the special import.meta.env object. To find out mores see Env Variables and Modes for Vite.

Local Development HTTPS variable

A new environment variable was added to handle https for local development. It needs to be set to true for local development and false for when you deploy to the pipeline.

VITE_LOCAL_DEV = true

Local Development (Port: 3000 HTTPS)

npm run dev

Builds and starts a web server for your web application. It provide hot mdule reloading on both the React front-end and the ExpressJS back-end. When launched in local development mode the entire application is available at https://localhost:3000 Local SSL will be needed in order to run the MyID authentication locally.

Deployment

For deployments, the build file will run and install, build, and start. You can also run this in local development to ensure everything is working.

npm run build

npm run start

Docker

If you are running Docker Desktop locally, you can also build this into a container.

FROM node:20

Run the included docker-compose file in a terminal to spin up a container of this locally.

docker-compose up -d

Run tests

npm run test

Runs tests for all included files within the project.

Run linting

npm run lint

Runs linting for all included files within the project.

About this template

adinf-console uses React + TypeScript + Express + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

Component Libraries

• Material UI
• For Data tables use MUI X Data Grind
• For date and time pickers use MUI X Date and Time Pickers
• Charts - MUI X Charts
• A tree view widget presents a hierarchical list useMUI X Tree View
• Tailwind CSS