How to deploy Nuxt.js(SSR with Express.js) to Vercel via Gitlab? - express

Question

I have successfully built my app and only remain step is deploy to the host Vercel via my repo on Gitlab
I use Nuxt.js(SSR type) with server Express.js and Nuxt.js Now Builder to deploy host Vercel via repo Gitlab
This is structure
api/
--| index.js
now.json
nuxt.config.js
In index.js
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const products = require("./routes/product/products");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Import API Routes
app.use(products);
// Export the server middleware
module.exports = {
path: "/api",
handler: app
};
In now.json
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "#nuxtjs/now-builder",
"config": {
"serverFiles": [
"package.json"
]
}
}
]
}
And in nuxt.config.js
...
serverMiddleware: [
// API middleware
"~/api/index.js"
]
...
According to Vercel documentation, deploying is very easy, just commit and push code to Gitlab to complete
However, i always get error as below
I don't understand why? I don't know what i missed. Please help me and i'm very grateful for the help

Answer 1

narze, thank you for your solution, unfortunately it didn't work for me but pointed me in the right direction.
Here is my working now.json:
{
"version": 2,
"env": {
"ON_VERCEL": "true"
},
"builds": [
{
"src": "api/**/*.js",
"use": "#now/node"
},
{
"src": "nuxt.config.js",
"use": "#nuxtjs/now-builder"
}
],
"routes": [
{ "src": "/api/(.*)", "dest": "api/index.js" },
{ "src": "/api", "dest": "api/index.js" },
{ "src": "/(.*)", "dest": "$1" }
]
}
serverMiddleware in nuxt.config.js
serverMiddleware: isServerlessEnvironment ? [] : [
'~/api/index.js'
],
where isServerlessEnvironment defined on the very top of nuxt.config.js as
const isServerlessEnvironment = process.env.ON_VERCEL=="true"
API files need to be compiled with #now/node.
Routes need to be set up to separate nuxt routes from api routes.
With conditional isServerlessEnvironment in nuxt.config.js it works on local server with yarn dev and vercel server.
Credits to this article: Nuxt.js with an Express.js API server running on Now.sh
Thank you all for being helpful :)

Answer 2

I have similar problem with deploying Nuxt on Vercel with serverMiddleware's which returned 405 (Not Allowed). I solved it using this doc Nuxt Vercel Builder by specifying property serverFiles in vercel.json:
{
"builds": [
{
"src": "nuxt.config.js",
"use": "#nuxtjs/vercel-builder",
"config": {
"serverFiles": ["server-middleware/**"]
}
}
]
}
If you need to include files in the server lambda that are not built
by webpack or within static/, such as a local module or
serverMiddleware, you may specify them with this option. Each item can
be a glob pattern.

Answer 3

I know it's a bit late now lol. But I wrote an article to demonstrate the whole process to get your app up and running on Vercel. You can find it here.