CRA Universal

CRA Universal

  • Docs
  • API
  • Help
  • Blog

›Introduction

Introduction

  • Getting started

Guides

  • Deployment
  • Customization
  • Code Splitting
  • Prefetching

Integration

  • React Router
  • Redux
  • TypeScript

Getting started

Prerequisites

  • Node >= 8.6 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

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`

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

  • Create React App https://github.com/facebookincubator/create-react-app
  • Thanks for https://github.com/ayroblu/ssr-create-react-app-v2 for the base!

License

MIT

Deployment →
  • Prerequisites
  • Installation
    • Client code change
  • Development
  • Production
  • Deployment
  • Credit
  • License
CRA Universal
Docs
Getting StartedDeployment GuideAPI Reference
Community
Stack OverflowSpectrumTwitter
More
BlogGitHubStar
Copyright © 2020 Antony Budianto