How to set up and deploy a Frontity site on


Set up and deploy a Frontity site to


You will need:

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


Deploying a hybrid Javascript 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.


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 by creating the necessary files and folders. We can do that by carrying out the following steps:

  • We’ll create a .platform folder in the root folder of our application.

     touch .platform
  • After creating the folder, we’ll need to create the following files inside the .platform folder: services.yaml and routes.yaml

     cd .platform && 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
             type: upstream
             upstream: "frontity-site:HTTP"
            type: redirect
            to: "https://www.{default}/"
  • The next thing we need to do is to create a 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
  • The next step is to add a start command to our package.json file, so that 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 needs to follow to deploy our application. Inside the file, add the following config:

        # This file describes an application. You can have multiple applications
        # in the same project.
       # See
       # The name of this app. Must be unique within a project.
       name: frontity-site
       # The runtime the application uses.
       type: nodejs:14
          flavor: none
      # The hooks executed at various points in the lifecycle of the application
        build: |
      # Install dependencies and build frontity
      npm i
      npm run build
            start: NODE_ENV=production npm run start

3. Deploying to

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

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

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

Wait, you thought there was going to be more? Nope! 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.


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

Congratulations, and thanks for using!