Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stormkit-io/monorepo-template-react
A template capable of server-side rendering, generating static pages, serving single-page applications, and providing an API.
https://github.com/stormkit-io/monorepo-template-react
api javascript react reactjs serverless serverless-framework serverside-rendering ssr static-site-generator vitejs
Last synced: 1 day ago
JSON representation
A template capable of server-side rendering, generating static pages, serving single-page applications, and providing an API.
- Host: GitHub
- URL: https://github.com/stormkit-io/monorepo-template-react
- Owner: stormkit-io
- License: mit
- Created: 2023-01-13T12:39:00.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-15T08:37:19.000Z (about 2 months ago)
- Last Synced: 2024-09-15T11:18:42.899Z (about 2 months ago)
- Topics: api, javascript, react, reactjs, serverless, serverless-framework, serverside-rendering, ssr, static-site-generator, vitejs
- Language: TypeScript
- Homepage: https://monorepo-template-react.stormkit.dev/
- Size: 863 KB
- Stars: 62
- Watchers: 3
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - monorepo-template-react - React + Typescript template for SSR, SPG, SPA and API provision. (Get Started / Templates)
- awesome-vite - monorepo-template-react - React + Typescript template for SSR, SPG, SPA and API provision. (Get Started / Templates)
README
> Minimal no-framework monorepo template built with Vite and React
## Features
[](https://api.stormkit.io/deploy?template=https%3A%2F%2Fgithub.com%2Fstormkit-io%2Fmonorepo-template-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
## Getting started
This is a starter template for building applications with Vite and React. Click `use this template` and start working right away.
## Development
```
# 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.
## How it works?
In the local environment, [src/entry-server.tsx](./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](./src/context.ts).
See [src/pages/ssr.tsx](./src/pages/ssr.tsx) for an example.
## Static site generator
You can define which routes to prerender by modifying the [src/prerender.ts](./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.
## Single page app
By default, every route is a single-page application.
## API
The [src/api/](./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](https://www.stormkit.io). [Check the docs](https://www.stormkit.io/docs/features/writing-api) for more information.
If you need to host the API elsewhere, you'll need to change the [vite.config.api.ts](./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.
## Test
Jest is already preconfigured to work with this repository. Simply run:
```bash
$ 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:
```bash
$ npm run test -- --watch
$ yarn test --watch
$ pnpm run test --watch
```
## Community
Here's a curated list of websites using this framework. Please feel free to add your own:
| Site name | Description |
| --------- | ----------- |
| [Stormkit.io](https://www.stormkit.io) | Deploy full stack javascript applications on the cloud |
| [Feez.ws](https://www.feez.ws) | Track your progress in public |
## License
MIT