Deploy Frontity using Vercel

In their own words : Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host Jamstack sites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.

We strongly recommend this service as it is serverless, cheap, includes CDN, and really easy to set up.

It also supports the cache technique stale-while-revalidate (they name it Serverless Pre-Rendering), a powerful way to improve your site speed.

To be able to deploy with vercel you need to have a Vercel account. You can signup here.

Once you have an account you have to login to Vercel from the terminal

> npx vercel login

These are the instructions to deploy a Frontity project on Vercel, once you are ready to deploy your project:

Create a vercel.json​

  1. Create this vercel.json file and save it in the root your Frontity project

{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@frontity/now"
}
]
}

Deploy

Deploy Frontity using the vercel command (from the root of your project):

> npx vercel

You should get something like this

Vercel CLI 19.2.0
? Set up and deploy β€œ~/PROJECTS/2020/FRONTITY/DEMOS/my-frontity-project”? [Y/n] y
? Which scope do you want to deploy to? myVercelScope
? Link to existing project? [y/N] n
? What’s your project’s name? my-frontity-project
? In which directory is your code located? ./
πŸ”— Linked to vercel-username/head-tags (created .vercel)
πŸ” Inspect: https://vercel.com/vercel-username/my-frontity-project/lofg8n03c [2s]
βœ… Production: https://my-frontity-project.vercel.app [copied to clipboard] [1m]

More about Vercel scopes ​

Vercel will assign you a domain (something like your-project-name.vercel.app) that that will allow you to check your site online

From this deploy example we have got the following URL's:

Deploy your site under a custom domain

To deploy your site under a custom domain you have to

  • Configure your Frontity app to point to that custom domain

  • Configure your custom domain for your project in the Vercel settings

  • Add Vercel nameservers for your custom domain from your domain provider

...before deploying it

Add your custom domain in your project settings

From the project settings URL provided in our previous deploy (https://vercel.com/vercel-username/my-frontity-project/settings in our example) we can set a custom domain

Add it, and you will be provided by a set a nameservers you can use in your domain provider to point your custom domain to the Vercel nameservers

vercel nameservers

Add subdomain in your project settings

A subdomain can be used to separate your WordPress and Frontity deployments. They can be created within Vercel dashboard from the domains section.

To setup a subdomain for your WordPress source, simply select your desired domain from the list and add a new DNS Record with type A and the IP address of your WordPress server.

Add Vercel nameservers in your domain provider

You need to set Vercel nameservers as custom DNS of your custom domain from your domain provider site

If you don't know how to do this, contact your domain provider (GoDaddy, CloudFlare, etc)

Deploy

Then, deploy Frontity using this command (from the root of your project):

> npx vercel --prod

You should get something like this

β¬’ my-frontity-project npx vercel --prod
​
πŸ” Inspect: https://vercel.com/vercel-username/my-frontity-project/9ue4zsq9n [2s]
βœ… Production: https://mycustomtomain.com [copied to clipboard] [4s]
​
This will create a deploy and assign it to your real site url.
​
> More about Vercel [deployments](https://vercel.com/docs/v2/platform/deployments)

Still have questions? Ask the community! We are here to help 😊