Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antonybudianto/cra-universal
🌏 Create React App companion for universal app. No eject, zero config, Streaming SSR with Suspense. React 18 ready
https://github.com/antonybudianto/cra-universal
cli create-react-app react server-side-rendering ssr universal zero-config
Last synced: 5 days ago
JSON representation
🌏 Create React App companion for universal app. No eject, zero config, Streaming SSR with Suspense. React 18 ready
- Host: GitHub
- URL: https://github.com/antonybudianto/cra-universal
- Owner: antonybudianto
- License: mit
- Created: 2017-08-15T08:27:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-09-26T10:15:52.000Z (over 2 years ago)
- Last Synced: 2025-01-05T16:03:33.337Z (7 days ago)
- Topics: cli, create-react-app, react, server-side-rendering, ssr, universal, zero-config
- Language: JavaScript
- Homepage: https://codesandbox.io/s/cra-universal-demo-9wnwb7
- Size: 3.3 MB
- Stars: 430
- Watchers: 10
- Forks: 54
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-indo-projects - cra-universal - Create React App companion for universal app. No eject, zero config, full HMR, and more. (JavaScript)
- -awesome-create-react-app - CRA Universal CLI - CLI for SSR Create React App, without eject (Tools)
- awesome-create-react-app - CRA Universal CLI - CLI for SSR Create React App, without eject (Tools)
- awesome-indonesia-repo - cra-universal - Create React App companion for universal app. No eject, zero config, full HMR, and more. (JavaScript)
- awesome-vietnam-repo - cra-universal - Create React App companion for universal app. No eject, zero config, full HMR, and more (JavaScript)
README
# cra-universal
### Create React App Universal CLI
[](https://opencollective.com/cra-universal) [](https://badge.fury.io/js/cra-universal)
Create React App companion for universal app. No eject, zero config with customization, supports string and node stream API
> [Live Demo](https://codesandbox.io/s/cra-universal-demo-9wnwb7) | [Official Doc](https://antonybudianto.github.io/cra-universal)
## Features
- **No [eject](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-eject)** needed!
- **Zero config** by default and **customizable**
- **Server-side rendering** for your SEO
- **Code-splitting** that works universally
- The core middleware is fully **unit-tested**
- Works alongside `react-scripts`, not as replacement
## Prerequisites
- Node >= 14.17.5 LTS recommended
- npx is required
## Installation
```sh
# Create new cra
create-react-app myapp
cd myapp
# Install new cra-universal
yarn add -D cra-universal
# Install peer dependency
yarn add @cra-express/core [email protected]
```
## Existing Projects
```sh
# Install new cra-universal
yarn add -D cra-universal
# Install peer dependency
yarn add @cra-express/core [email protected]
# init custom server (optional)
yarn run cra-universal init
#This will copy ./templates/server into the current directory (it should be run on CRA client root)
```
## Client code change
Please update your render method on `src/index.js`
```js
// before
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
// after
ReactDOM.hydrateRoot(document.getElementById('root'), );
```
## Development
```sh
# Start CRA client
npm start
## Start CRA server, then open http://localhost:3001 in your browser
npx cra-universal start
```
## Production
```sh
# Change directory to your project root first, and run:
npx cra-universal build
# This command will build both client and server and put them into `./dist`
# Run locally:
# $ cd dist && npm i
# $ npm run serve
```
## Deployment
1. First, follow the Production guide mentioned above.
2. Since the bundle used [Webpack Node Externals](https://www.npmjs.com/package/webpack-node-externals), you need to run `npm install --production` on the copied `/dist`, but this time you don't need to install its `devDependencies`
3. Use process manager like [PM2](https://github.com/Unitech/pm2) to run your server, your run target is ./dist/server/bundle.js
## Credit
- Create React App https://github.com/facebook/create-react-app
- Thanks for https://github.com/ayroblu/ssr-create-react-app-v2 for the base!
## Support
If you like this project, please kindly support it by becoming a patron at my [Patreon](https://www.patreon.com/antonybudianto) page. Thanks!
## Sponsors
- Stan Day ([email protected])
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/cra-universal/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/cra-universal/contribute)]
## License
MIT