How to set up and deploy a Frontity site on Upsun

Matt Sinagra

Updated March 12, 2026 05:22

Goal

Set up and deploy a Frontity site to Upsun

Assumptions

You will need:

An SSH key configured on your Upsun account
Node.js installed on your machine
Knowledge of Frontity

Problems

Deploying a hybrid JS library can be quite tricky because the way the project is structured can differ from what one is used to and if it’s not done right the deployment will fail.

Steps

1. Creating a Frontity Site

To start, we need to create a site on our local machine before we can deploy it. We can create our Frontity starter site by running the following command:**

$ npx frontity create my-frontity-site

We’ll be required to select a starter theme, please go ahead and press “Enter” as we will be using the Frontity Mars theme because it is recommended

$ ? Pick a starter theme to clone: @frontity/mars-theme (recommended)

After selecting the preferred theme, a directory with all the required files will be created. The next thing we need to do is to run our application on our local machine. We can do that by running the following command:

 $ cd my-frontity-site && npx frontity dev

The above command will take us into our project directory and then start the development server on http://localhost:3000. If we navigate to http://localhost:3000 on your browser, we should see our Frontity site.

2. Setting Up the Frontity Site for Deployment

The next thing we need to do is to set up our application for deployment to Upsun by creating the necessary files and folders. We can do that by carrying out the following steps:

We’ll create a .upsun folder in the root folder of our application.
```
 touch .unsun
```
After creating the folder, we’ll need to create the following files inside the .upsun folder: services.yaml and routes.yaml
```
 cd .upsun && touch .services.yaml routes.yaml
```
Inside the services.yaml file, we’ll be adding nothing to it since our Frontity site is not going to be using any external services.

Inside the routes.yaml file, we’ll need to configure a route we can use to preview our application when we deploy it. We can do that by adding the following to the routes.yaml file.

    # The routes of the project.
    #
    # Each route describes how an incoming URL is going
    # to be processed by Upsun.

    "https://www.{default}/":
         type: upstream
         upstream: "frontity-site:HTTP"

    "https://{default}/":
        type: redirect
        to: "https://www.{default}/"

The next thing we need to do is to create a .upsun.app.yaml file in the root folder of our Frontity site. This file will contain all the necessary configurations our application needs in other to be deployed on Upsun
```
 touch .upsun.app.yaml
```

The next step is to add a start command to our package.json file, so that Upsun can start our Frontity site for us after deployment. We can do that by adding the following to the scripts section of our package.json file
```
 "start": "frontity serve --port $PORT",
```
After adding the above to our package.json file, the scripts section will look like this.
```
 "scripts": {
    "start": "frontity serve --port $PORT",
    "dev": "frontity dev",
   "build": "frontity build",
   "serve": "frontity serve"
},
```

The next thing we need to do is to specify our application name and steps Upsun needs to follow to deploy our application. Inside the .upsun.app.yaml file, add the following config:

    # This file describes an application. You can have multiple applications
    # in the same project.
    #
   # See https://docs.upsun.com/configuration/app.html

   # The name of this app. Must be unique within a project.
   name: frontity-site

   # The runtime the application uses.
   type: nodejs:14

   build:
      flavor: none

  # The hooks executed at various points in the lifecycle of the application
  hooks:
    build: |
  # Install dependencies and build frontity
  npm i
  npm run build

  web:
    commands:
        start: NODE_ENV=production npm run start

3. Deploying to Upsun

To deploy to Upsun all we need to do is to run the following commands after authentication with our Upsun account:

git add .
git commit -m "add upsun setup files"
git push upsun master

So that’s it, we just deployed our Frontity site on Upsun.

Wait, you thought there was going to be more? Nope! Upsun has done it all for us, including giving our site a temporary link (routes) for our adoring public to view. Now we can add a custom domain, create a new environment or make any change of our choice to our Frontity site.

Conclusion

We successfully set up a Frontity site and deployed it to Upsun with ease.

Congratulations, and thanks for using Upsun!