Minimal no-framework monorepo template built with Vite and React
✔️ Hybrid application: Choose rendering method (SSG, SSR, SPA) based on routes
✔️ API support: Optional file-system routing support for API endpoints
✔️ No framework: React knowledge is enough to use this template
✔️ SEO: SEO tags included for SSR and SSG
✔️ Compatible: Build produces separate folders for client-side, server-side, and API. Highly compatible with hosting providers.
✔️ HMR: Hot module replacement support for all apps (SSR, SSG, SPA, API)
✔️ Typescript: Built-in TypeScript support
✔️ Jest: Built-in Jest support
This is a starter template for building applications with Vite and React. Click use this template
and start working right away.
# Using npm
npm run dev
# Using yarn
yarn dev
# Using pnpm
pnpm run dev
This will spawn an Express server that serves your application. Built-in Hot Module Replacement (HMR) support.
In the local environment, src/entry-server.tsx is the entry point for the application. It uses
react-router
to understand what page to render. If the route exports a fetchData
method, the component will be server-side-rendered.
Otherwise, it will be client-side rendered. Data returned by fetchData
will be made available to the component by React Context.
See src/pages/ssr.tsx for an example.
You can define which routes to prerender by modifying the src/prerender.ts file. During build time, the builder will be make a request to each route exported by this file and will take a snapshot of the HTML document.
By default, every route is a single-page application.
The src/api/ directory contains functions that act as API. The path to the file and the file name is used to determine the endpoint. The API is comptabile with Stormkit. Check the docs for more information.
If you need to host the API elsewhere, you'll need to change the vite.config.api.ts file and create a bundle from it. You may also need to write an entry point that calls the appropriate function based on the route.
Jest is already preconfigured to work with this repository. Simply run:
$ npm run test
$ yarn test
$ pnpm run test
to execute all tests. You can add the --watch
flag to keep listening to changes while testing:
$ npm run test -- --watch
$ yarn test --watch
$ pnpm run test --watch
Here's a curated list of websites using this framework. Please feel free to add your own:
Site name | Description |
---|---|
Stormkit.io | Deploy full stack javascript applications on the cloud |
Feez.ws | Track your progress in public |
MIT