https://github.com/tzachbon/ssr-react-monorepo-example

Example for React Server-Side Rendering (SSR) without any framework inside monorepo with Typescript and tests
https://github.com/tzachbon/ssr-react-monorepo-example

async-rendering components-react e2e express javascript mocha monorepo nextjs nodejs react server-side-rendering ssr suspense testing turborepo typescript webpack

Last synced: 2 months ago
JSON representation

Example for React Server-Side Rendering (SSR) without any framework inside monorepo with Typescript and tests

• Host: GitHub
• URL: https://github.com/tzachbon/ssr-react-monorepo-example
• Owner: tzachbon
• Created: 2022-03-27T23:21:56.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-04-27T10:05:24.000Z (9 months ago)
• Last Synced: 2024-04-27T11:29:48.194Z (9 months ago)
• Topics: async-rendering, components-react, e2e, express, javascript, mocha, monorepo, nextjs, nodejs, react, server-side-rendering, ssr, suspense, testing, turborepo, typescript, webpack
• Language: TypeScript
• Homepage:
• Size: 1.91 MB
• Stars: 8
• Watchers: 3
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Example for React Server-Side Rendering (SSR) without any framework inside monorepo with Typescript

This repo is trying to demonstrate how to implement server side rendering with React in a simple monorepo (npm v8 workspaces) without any frameworks.

> It's still a WIP.

## Stack

* Package Manager: [npm](https://www.npmjs.com/)

* Worksapce Manager: [npm (v8)](https://docs.npmjs.com/cli/v8/using-npm/workspaces)

* Script runner: [Turborepo](https://turborepo.org/)

* Language: [Typescript](https://www.typescriptlang.org/) (Output to [`esm`](https://nodejs.org/api/esm.html))

* Bundler: [Webpack](https://webpack.js.org/)

* Test Runner: [Mocha](https://mochajs.org/)

* Assertion Library: [Expect](https://www.npmjs.com/package/expect)

* Web testing and Automation: [Playwright](https://playwright.dev/)

* Linter: [ESLint](https://eslint.org/)

* CI: [Github Actions](https://github.com/features/actions)

## Installation

> Make use you use npm version 8 or above.

```bash

npm install

```

> We look for a seamless development that will react according to your changes, here's the command that you should run at the **root of the project**

## Build

```bash

npm run build

```

## Development

```bash

npm run dev

```

### Testing

In order to test the monorepo you have 2 options:

* Run the tests with `npm test` which will use `mocha` as the test runner and run the suites in parallel. Make sure to create the tests inside the `test` folder (in each package) and under the suffix `.test.ts`.

* If you use VSCode, you can use the build-in debugger. Go to the file that you want to debug and press F5. It should run only the specific file.

### Development and building 

#### App

Main client application (React).

* `dev` - Run watcher for typescript files and initialize Webpack dev server for the client code.

* `build` - Build the types and the client bundle.

#### Server

The server application (express).

* `dev` - Run watcher for typescript files and the client bundle.

* `build` - Build the types and the client bundle.

#### Upgrade Dependencies

Once in a while you probably have to upgrade the dependencies.

Run this commands:

```bash

npm run upgrade:dependencies

rm package-lock.json

rm -rf node_modules

npm it

```

We added `pleb.config.mjs` to skip a specific dependencies we don't want to upgrade.