React

Last updated 5 months ago

Whether you are using Create React App or Vite, Nubo supports React out of the box. With some minor configurations, you can launch your React project today.

Transpilation

React is transpiled into plain JavaScript that browsers can actually run. Regardless of whether you are using Vite or CRA your React code is transpiled with esbuild (Vite) or Babel (CRA).

Nubo will detect that there is a build script in your package.json which usually looks something like:

"build": "vite build"

If this line is detected, it will run this script during the build phase to transpile your assets.

Configuring a web server

Once we have our static assets (generated by the transpilation process), we need to setup a server that will actually handling serving these assets to our end user.

You have a few options. These are described below.

  1. Follow the static site documentation and create the necessary Nginx or Apache configurations

  2. Use serve or http-server packages

In this tutorial, we will be using the serve package.

Installing the serve package

Firstly, we will want to install the serve package by running:

npm install serve

Configuring the start script

A start script in the package.json will tell Nubo to run this as the default process for the container. In this case, we will specify the start script to start up our HTTP server and serve our static assets.

Add the following start script to your package.json:

Vite:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "start": "serve ./dist" <-- Add this line for Vite
  },

CRA:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "start": "serve ./build" <-- Add this line for CRA
  },

You are now ready to deploy with Nubo. Simply commit your changes and head to the Nubo dashboard to deploy.