2

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 enter image description here I don't understand why? I don't know what i missed. Please help me and i'm very grateful for the help

5
  • 1
    Did you find a solution? Would you please share? I'm struggling with the same setup. Thank you :) Jul 2, 2020 at 10:00
  • 1
    @AlexanderBenjamin In now.json, the "serverFiles" should point to files to be included along with nuxt's default (.nuxt), in this case the path which are being used for serverMiddleware. So you have to add "api/**" to serverFiles config
    – narze
    Jul 4, 2020 at 6:15
  • hi Alexander Benjamin, until now, i don't find any solution for this, i have given up on it because there are so few documentation and support community. I frozen with it, so i switch to another platform :D
    – user12557324
    Jul 6, 2020 at 17:15
  • Hi? have you found a solution? I got a solution for the many hours that I passed. let me know if not, maybe i can help you Jan 25, 2021 at 18:17
  • @AlauddinAfifCassandra can you please share the solution?
    – ImZedi
    Aug 22, 2021 at 10:57

3 Answers 3

0

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 :)

2
  • Hi @TT. I am asking a question indeed. I'm sorry, I do believe I clicked on 'Add comment' link. Is there a way to correct this? Jul 6, 2020 at 9:58
  • 1
    @TT., I've just found a solution. So I will delete the current answer and post the correct, actual, answer :) Thank you :) Jul 6, 2020 at 12:03
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.