Frontity Docs
  • ยป Welcome to Frontity
  • ๐Ÿš€Getting started
    • Quick start guide
  • ๐Ÿ“ƒAbout Frontity
    • Frontity features
    • Browser support
    • Get involved
  • ๐Ÿ“šCore Concepts
    • 1. Project
    • 2. Settings
    • 3. Packages
    • 4. Roots
    • 5. State
    • 6. Actions
    • 7. Libraries
    • 8. Namespaces
    • 9. Styles
  • ๐Ÿ—๏ธArchitecture
    • Decoupled Mode
    • Embedded Mode
  • ๐ŸŒŽDeployment
    • Deploy Frontity using Vercel
    • Deploy Frontity on Layer0
    • Deploy Frontity on Heroku
  • ๐ŸŒ—Isomorphic React
  • โšก๏ธ Perfomance
    • Caching
    • Link prefetching
    • Lazy Loading
    • Code Splitting
  • ๐Ÿ”ŽSEO
  • ๐Ÿ“–Guides
    • Setting the URL of the WordPress data source
    • Using Environment Variables in a Frontity project
    • WordPress requirements for Frontity
    • URLs in a Migration from WordPress to Frontity Decoupled Mode
    • Frontity Query Options
    • Redirections with Frontity
    • Understanding a Frontity project
    • Add a new Frontity package or theme to your project
    • How to share your Frontity project
    • Understanding Mars Theme
    • Working with processors
    • How to process page-builder content in Frontity
    • Keep Frontity Updated
    • Troubleshooting
    • JavaScript
    • React
  • ๐Ÿ‘Contributing
    • How to contribute?
    • Contributing Guide
Powered by GitBook
On this page
  • Table of Contents
  • Signup and Login into Vercel
  • Deploy your site under a Vercel domain
  • Create a vercel.json file
  • Run deployment
  • Deploy your site under a custom domain
  • Add your custom domain to your Vercel project settings
  • Add Vercel nameservers in your domain provider
  • Deploy
  • Vercel and HTTPS

Was this helpful?

  1. Deployment

Deploy Frontity using Vercel

PreviousDeploymentNextDeploy Frontity on Layer0

Last updated 3 years ago

Was this helpful?

In : 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, , and really easy to set up.

It also supports the cache technique stale-while-revalidate (which they call ). This is a powerful way to improve your site speed.

Table of Contents

Signup and Login into Vercel

> npx vercel login

Deploy your site under a Vercel domain

Deploying to Vercel is really easy and all the required configuration for Frontity projects is automatically set for you via a vercel.json file.

So, to deploy your Frontity site under a Vercel domain you have to:

Create a vercel.json file

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

Run deployment

> 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]

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

From the above deployment example we got the following URL's:

  • Live URL: https://my-frontity-project.vercel.app โ†’ Our temporary URL assigned automatically by Vercel, We can check (and share) our site online from this URL

  • Inspect: https://vercel.com/vercel-username/my-frontity-project/settings โ†’ Here we can check the status of our site and check the logs among other things

  • Project Settings: https://vercel.com/vercel-username/my-frontity-project/settings โ†’ Here we can change domain and build settings among other things

Deploy your site under a custom domain

To deploy your site in Vercel under a custom domain you have to:

Add your custom domain to your Vercel project settings

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

Add a subdomain for your WordPress source

Add Vercel nameservers in your domain provider

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

Deploy

Finally, 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 deployment and assign it to your real site URL.

Vercel and HTTPS

Vercel now forces all apps to be served over HTTPS. You therefore need to ensure that your WordPress site has a SSL certificate and that you connect to your WordPress API endpoint using HTTPS rather than HTTP.

{
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "url": "https://your-wordpress-blog-url/",
        }
      }
    },
...

The effect of using a HTTP only connection on a Frontity project deployed on Vercel will result in navigation links not working and getting stuck in the data.isFetching state (although apparently working on the local dev machine). The reason is that Frontity won't be able to fetch the content from the WordPress backend over HTTP on a pure HTTPS site.

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

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

(if you haven't already).

.

.

Create this file and save it in the root of your Frontity project.

is a Frontity builder created especifically for Vercel. It encapsulates all the actions that need to be triggered on Vercel servers when deploying a Frontity project

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

More about Vercel

(if you haven't already).

.

.

Add it, and you will be provided with a that you can use in your domain provider's configuration to point your custom domain to the Vercel nameservers.

vercel nameservers

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

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

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

More about Vercel

Still have questions? Ask ! We are here to help ๐Ÿ˜Š

๐ŸŒŽ
signup here
login
vercel.json
@frontity/now
vercel command
scopes
set of nameservers
domains section
list
add a new DNS Record
Vercel nameservers
deployments
the community
Signup and Login
Create a vercel.json file
Run deployment
Deploy your site under a Vercel domain
Add your custom domain to your Vercel project settings
Add Vercel nameservers for your custom domain from your domain provider
Run deployment
their own words
Serverless Pre-Rendering
Signup and Login into Vercel
Deploy your site under a Vercel domain
Create a vercel.json file
Run deployment
Deploy your site under a custom domain
Add your custom domain from your Vercel project settings
Add a subdomain for your WordPress source
Add Vercel nameservers in your domain provider
Deploy
Vercel and HTTPS
includes CDN