Morioh
Login
Cristian Vasta

Cristian Vasta

3 years ago

Create React App companion for universal app

cra-universal

Create React App Universal CLI

zero

Create React App companion for universal app. No eject, zero config with customization, supports string and node stream API

Live Demo | Official Doc

Features

  • No 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 >= 12.16.1 LTS recommended
  • npx is required

Installation

# 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

Existing Projects

# Install new cra-universal
yarn add -D cra-universal

# Install peer dependency
yarn add @cra-express/core

# init
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

// before
ReactDOM.render(...)

// after
ReactDOM.hydrate(...)

Development

# Start CRA client
npm start

## Start CRA server, then open http://localhost:3001 in your browser
npx cra-universal start

Production

# 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:
# $ node --preserve-symlinks dist/server/bundle.js
# You only need `--preserve-symlinks` on local, since we only do symlinks on development.

Deployment

  1. First, follow the Production guide mentioned above.
  2. Since the bundle used 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 to run your server, your run target is ./dist/server/bundle.js

Credit

Support

If you like this project, please kindly support it by becoming a patron at my Patreon page. Thanks!

Download Details:

Author: antonybudianto

Live Demo: https://antonybudianto.github.io/cra-universal/

GitHub: https://github.com/antonybudianto/cra-universal

#reactjs #javascript #react #react-js

Create React App companion for universal app
5.65 GEEK