Up(sun) and running with React

Upsun is well-suited to host JavaScript applications of all kinds, including React apps. This short guide will get you started on the first steps of creating your React project, deploying it to Upsun, and then leveraging its features to kickstart your development. 

Building React projects

For this tutorial, we can leverage the React quickstart to create our application. 

Run the command:

npx create-react-app upsun-react --template cra-template-kendo-typescript

create-react-app will set up the scaffolding for the new repository, in this case leveraging KendoReact - a project that contains a collection of ready made React components according to the KendoReact UI System. 

When the project has finished building and installing dependencies, we can run a development version of the site locally with cd upsun-react && npm run start and visit the site at http://localhost:3000. 

If we instead wanted to build a production version of the application, we can do so with the command

npm run build

which will build static HTML, JS, and CSS in the local build subdirectory. We can then run that built site quickly with a local server, such as the below Python-based approach:

python3 -m http.server --directory=build 3000

Deploying React projects

With the Upsun CLI installed and an account already created, running the following command from the React repository:

upsun create -o YOUR_ORG_NAME --title=React-Upsun --region=ca-1.platform.sh --default-branch=main -y 

Replace YOUR_ORG_NAME with the desired organization, and feel free to substitute with another region if you’d like. Next, create a minimal Upsun configuration file to build and then deploy the React project.

# .upsun/config.yaml

applications:

    upsun-react: 

        type: "nodejs:20"

        hooks:
            build: |
                set -eux
                npm install
                npm run build

        web:
            locations:
                /:
                    root: build
                    index:
                        - index.html        

Stage, commit, and push to Upsun. In a few minutes, you’ll see your React app has been built and deployed successfully.

git add .upsun/config.yaml
git commit -m "Migrate to Upsun."
upsun push -y 

Making revisions

An accumulated activity log appears locally in your terminal and in the push activity in the Upsun management console. You may have noticed – depending on when you go through this tutorial – that there may be some outdated and even potentially vulnerable dependencies present  in the repository. We can dedicate a preview environment to upgrading and improving this situation a bit.

First, create that environment:

upsun branch upgrades

Then let’s get our versions in order and use the latest version of Node.js both locally and on Upsun. We can use a tool like nvm to download the latest available version of Node.js – which at the time of this writing is Node.js 22 (adjust the commands below to the current version, depending how far you’re living in the future). Install nvm, and then use it to install the most recent version of Node.js:

$ nvm install 22
$ node -v
v22.11.0

We can update .upsun/config.yaml to match this recent version.

# .upsun/config.yaml

applications:

    upsun-react: 

        # Updating this line from 20 --> 22
        type: "nodejs:22"

        hooks:
            build: |
                set -eux
                npm install
                npm run build

        web:
            locations:
                /:
                    root: build
                    index:
                        - index.html      

Then using npm, audit vulnerable dependencies and edit either manually or with the CLI tool itself with the commands npm upgrade and npm audit fix. Commit (git add . && git commit -m “Make upgrades”) and push the changes (upsun push -y). Verify the deployment has succeeded, and merged into production!

upsun merge -y

You’re all set!

That’s it! Now not only do you have a deployed React-based project on Upsun, you’ve gone through the same workflow you will develop with for every revision – whether for dependency upgrades or feature additions – you’ll make, complete with a preview environment for each one. 

Keep an eye out for more articles for deploying all kinds of applications on Upsun—follow us on our social channels to stay up-to-date: Dev.to, Reddit, and Discord. Make sure to join us on the brand new Developer Center for even more resources. 

Be seeing you!