Deploy Nuxt-Express app on Vercel with SSR functionality

#vercel #nuxt #ssr #express

Today I tried to deploy a Nuxt-Express app on Vercel and wanted to share this experience.

what is Nuxt?

In case you don't know. Nuxt.js is a framework that helps you build server-rendered Vue.js applications easily. It abstracts most of the complex configuration involved in managing things like asynchronous data, middleware, and routing. It’s similar to Angular Universal for Angular, and Next.js for React.

what is vercel?

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

Let's get started

1- Create the project. You can do that manually or just go with the Starter template for Nuxt.js with Express it won’t make a difference but I’ll suppose you downloaded the template and installed the packages.

2- Install @nuxtjs/vercel-builder.

npm i @nuxtjs/vercel-builder --save-dev

3- Create a vercel.json file and add this into:

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["api/**"] // HERE ADD THE PATH TO YOUR SERVER FILES
      }
    }
  ]
}

That’s all for the code. Now let’s deal with Vercel.

1- Import your github repo.
2- select the Vercel scope in my case I choose personal account.
3- Configure the build and output settings. You need to override the default values. In The build command field add npm run build. And in the output directory add .nuxt

4- The last step is to add your env variables.

At the end you should have something like this.