How to set up and deploy a Frontity site on Platform.sh

How-to Guides
, , ,
#1

Goal

Set up and deploy a Frontity site to Platform.sh

Assumptions

You will need:

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

Problems

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.

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 Platform.sh 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 Platform.sh.

    "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 .platform.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 Platform.sh
     touch .platform.app.yaml

  • The next step is to add a start command to our package.json file, so that platform.sh 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 Platform.sh needs to follow to deploy our application. Inside the .platform.app.yaml file, add the following config:

    
    # This file describes an application. You can have multiple applications
    # in the same project.
    #
   # See https://docs.platform.sh/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 Platform.sh

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

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

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

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

Congratulations, and thanks for using Platform.sh!