As of December 2022, Heroku has transitioned to a paid plan for hosting server-side apps. This left myself and many others with broken apps, with the option to pay for ‘dynos’ to get our apps running or migrate. If you’re like me and used Heroku for personal use, you probably don’t want to switch to a paid plan for fear of fluctuating hosting expenses and are going to look into alternatives. Most popular hosting services we know of (Netlify, Vercel, Firebase) have out-of-the-box support for static apps but require a bit more involvement when it comes to server-side rendering. Hence, I put together this guide for the very specific use case of apps built with Nuxt 2. I also have a Troubleshooting section for issues I faced that others might run into.
Step 1 - Create a Vercel account
Go to https://vercel.com to create a free account.
Step 2 - Configure your project for Vercel
Vercel supports non-SSR out of the box, but for SSR to work, we need to deploy a serverless function that handles all the server-related functions. For this, we will need to use https://github.com/nuxt/vercel-builder built by the Nuxt community. To use it you need to create a vercel.json in your project’s root directory.
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/vercel-builder"
}
]
}
Step 3 - Create a new project by importing your repository
Step 4 - Copy over necessary environment variables from Heroku to Vercel
Step 5 - Fill in the deployment settings
Choose Nuxt.js as the framework preset and fill in the build commands. The default commands should work but I added the yarn commands just to be sure. The commands are run in the following order.
-
yarn installwill grab all of the dependencies needed for your app to run -
yarn generatewill compile your client-side and server-side code and package it into minified files that will be saved in your output directory (dist) -
yarn startstarts the process that will run your app.
These steps are identical to those needed to run your app locally.
Step 6 - Deploy
I was able to migrate my SSR Nuxt.js application from Heroku to Vercel with these steps. If you’re still having issues, look through the troubleshooting section below or reach out to me. For reference, here is the code for my application - https://github.com/gucci-ninja/dotboard which is now running on https://dotboard.vercel.app/. Thanks!
Troubleshooting
Error - This serverless function has crashed/No build files found
FATAL No build files found in /var/task/.nuxt/dist/server.
Use either `nuxt build` or `builder.build()` or start nuxt in development mode.
Use either `nuxt build` or `builder.build()` or start nuxt in development mode.
at VueRenderer._ready (node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:4204:13)
at async Server.ready (node_modules/@nuxt/server/dist/server.js:615:5)
at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:703:7)
2023-01-03T00:01:47.485Z undefined ERROR λ Error while initializing nuxt: Error: No build files found in /var/task/.nuxt/dist/server.
Use either `nuxt build` or `builder.build()` or start nuxt in development mode.
at VueRenderer._ready (/var/task/node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:4204:13)
at async Server.ready (/var/task/node_modules/@nuxt/server/dist/server.js:615:5)
at async Nuxt._init (/var/task/node_modules/@nuxt/core/dist/core.js:703:7)
RequestId: 9f4fdef5-a109-4497-95e9-5f5c8f2a905b Error: Runtime exited with error: exit status 1
Runtime.ExitError
Solution
Version lock vercel-builder to 0.23.0 as there is an issue with 0.24.0 not invoking the serverless function.
{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/vercel-builder@0.23.0"
}
]
}
Relevant links
Error - Outdated dependencies
If you’re like me and were not actively developing your app, some of the dependencies might be outdated or need to be upgraded. So a quick test is to run the app locally and see if everything is working as expected. For example, I was getting the following error.
make: Entering directory `/vercel/path0/node_modules/node-sass/build'
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
Build failed with error code: 1
Error: Command "yarn install" exited with 1
Solution
I removed node-sass from my dependencies as I was not using it. I also needed to downgrade my sass-loader from ^9.0.3 to ^7.1.0
Relevant links
- https://stackoverflow.com/questions/60394291/error-node-modules-node-sass-command-failed
- https://stackoverflow.com/questions/58623072/npm-node-sass-installation-fails
Error - 404 when calling API. Runtime logs on Vercel showing 404 as the response status
Solution
If you have any endpoints or routes in your server code, you need to declare them in the vercel.json. I have a server/ folder which holds all the endpoints that my app serves (/api/auth/login, /api/auth/user) The code to handle all these requests resides in /server/index.js.
{
"builds": [
{
"src": "server/**/*.js", // path to code that handles API requests
"use": "@vercel/node"
},
{
"src": "nuxt.config.js",
"use": "@nuxtjs/vercel-builder@0.23.0",
"config": {}
}
],
"routes": [
{
"src": "/api/auth/login", // endpoint 1
"dest": "/server/index.js" // code that handles endpoint 1
},
{
"src": "/api/auth/user", // endpoint 2
"dest": "/server/index.js" // code that handles endpoint 2
}
]
}
Relevant links
Error - Deployment hanging and taking 7+ minutes
NowBuildError: node_modules_prod/rxjs/src/internal/observable/from.ts(116,5): error TS2322: Type 'import("/vercel/path0/node_modules/rxjs/internal/Observable").Observable<T>' is not assignable to type 'import("/vercel/path0/node_modules_prod/rxjs/src/internal/Observable").Observable<T>'.
node_modules_prod/rxjs/src/internal/observable/from.ts(116,29): error TS2345: Argument of type 'import("/vercel/path0/node_modules_prod/rxjs/src/internal/types").SchedulerLike' is not assignable to parameter of type 'import("/vercel/path0/node_modules/rxjs/internal/types").SchedulerLike'.
node_modules_prod/rxjs/src/internal/scheduled/scheduled.ts(31,38): error TS2345: Argument of type 'import("/vercel/path0/node_modules/rxjs/internal/types").SchedulerLike' is not assignable to parameter of type 'import("/vercel/path0/node_modules_prod/rxjs/src/internal/types").SchedulerLike'.
Solution
Not sure what the issue was but retrying the deployment worked.
Top comments (2)
Hey, thanks for the article! 🙏🏻
You don't need the
installpart inyarn install,yarnby itself is enough.For SASS, I recommend that you install
sass, this one is a better/more modern version of SASS. Check this answer for more details.Be careful, a Node.js environment like on Heroku and a Serverless rendering function on Vercel are both doing SSR but it's not exactly the same thing (got some advantages and some cons too).
For a truly identical comparison, I recommend checking Render or Railway.
Netlify/Vercel are still aimed at non-Nodejs environments and may behave a bit differently.
As for an SSR (classical) configuration, you usually use
ssr: true+target: 'server'+yarn build.yarn generateis for SSG (target: 'static') usually. But maybe this one is a requirement for the Nuxt module to work properly.I know that I saw Daniel sharing some shenanigans on that one last time on Discord. May be nice to double-check that it is the way to go so that you can maybe have a faster build on Vercel (SASS being the one slowing things down anyway). 👍🏻
Thanks for your comment! +1 to switching to SASS. I was definitely trying to get out the easy way and get my app back up and running. Ideally I want to move to a fully decoupled server/client.
Also, I'm on Nuxt 2 so there may be some differences.
ssr: trueandtarget: serverare both defaults, but it's good to call them out. That might be whygenerateworks out of the box :P