Skip to main content

​
Creating a React app

In this tutorial we will be using Vite, a fast frontend build tool. We are using Vite over Create React App as CRA has been deprecated as of February, 2025. To scaffold a new Vite project, use the following command: 
npm create vite@latest
Then simply follow the prompts to bootstrap a React project.

​
Deploying a React app

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 run. If you are using Vite, your code is transpiled using esbuild during development and bundled into static assets using Rollup for production. When your application is being deployed on Nubo. We 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 which transpiles your code using Vite.

​
Configuring a web server

Once we have our static assets (generated by the build process), we need to setup a server that will actually handling serving these assets to our end user. You have a few options. Of which are described below:
  1. Follow the static site documentation to create the necessary Nginx or Apache configurations.
  2. Use serve or http-server packages
In this tutorial, we will be using the serve package. We decided to go with serve because it is far more simple than setting up an Nginx server.

​
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:
package.json
  ...
  "scripts": {
    ...
    "start": "serve ./dist" <-- Add this line for Vite
  },
  ...

​
Push changes to GitHub

Stage all changes: 
git add .
Commit changes: 
git commit -m "build: add Nubo deploy config"
Push to GitHub: 
git push

​
Deploying on the Nubo dashboard

You are now ready to deploy with Nubo. Simply head to the Nubo dashboard and perform the following actions.
1

Create or select a project

Select or create project
2

Open the new Frame modal

Click on the ”+ Frame” butotn
Frame button section of dashboard
3

Choose repository and configure port

Select your repository from the list of repos that are displayed. Then, if applicable, configure your port to match the port that your server is listening on.
Select repository section
Serve listens on port 3000 by default. So be sure to change the “Application Port”.
⌘I