Introducing a barebones, slightly-opinionated boilerplate for working with a modern web stack written for 2021. This takes the additional jump of allowing you to run your own server, for applications that are more complex or need more flexibility than Netlify or Nextjs can provide.

Repo

• React 17
• Typescript 4.3
• Vite with Vite SSR
• GitHub Actions
• Tailwind CSS
• Prettier & ESLint

The SSR is accomplished through an Express server.

Vite HMR

Vite

Vite HMR is baked into the server, so we get the blazingly fast code changes reflected on the client seen in the video above. The server rendering logic currently does not have any type of prop injection or initial state.

Opinions

This boilerplate is slightly opinionated, specifically around linting and code format. The TypeScript config is set up such as to allow for the greatest flexibility

When running in development mode, the application uses ts-node to natively run the Express server and load in the Vite HMR. In development, the rendering is still done client side. In production, all requests are server rendered. Read more on SSR on the Vite docs.

There is no selected front end state management library or back end database. There is a simple React Context for basic state.

Hosting

This assumes a traditional hosting infrastructure. The goal of the project is to provide as little lock-in as possible. You’re required to set up the deployment infrastructure, as well as containerizing the application.

You can get this boilerplate here.