Netlify is a great option when it comes to hosting simple SSR/SPA projects on the cheap, starting with the basic plan (which is free) you get a ton of stuff, the caveat is that you are limited to a slower server and can’t use any of the premium plugins offered by them (which is not a big deal in my opinion). All you need to do is signup, import a repository and deploy, simple as that.

So let’s get going, follow the sections below and learn how to deploy your Nuxt.js project. I’ll assume that you already have a repository up on GitHub.

Signup

Head over to the signup page and make your registration, selecting “GitHub” should do the trick, but you can use your email as well.

Importing Repositories

Importing a new repository is really easy, all your have to do is press the “New site from Git” button on the dashboard. Connect with your repository host (GitHub), then, pick a repository to deploy and continue.

Now you will be prompted to review your build options, you can use the command from Nuxt’s documentation or specify a configuration file like the example below.

Configuring

Create a new file named netlify.toml at the root of your project and update its content based on the type of app you are currently building, either SSR or SPA. Follow the sections below to see which is the right configuration for your app.

Note: You don’t have to add this file at all, you can specify the same configuration within Netlify itself during the “Create a new site” step if you prefer.

SSR (Universal)

# netlify.toml

[build]
  # this is the dir that will be published
  publish = "dist/"
  # command to setup your SSR environment
  command = "yarn generate"

No extra anything, you are pretty much set.

SPA

# netlify.toml

[build]
  # this is the dir that will be published
  publish = "dist/"
  # command to setup your SPA environment
  command = "yarn build"

SPA’s require an additional configuration since whenever a 404 error occurs a page coming down from Netlify will appear (displaying a Netlify 404 error page instead of your own). This happens because, by default, the error page isn’t present in the final build, to address this problem a quick fix can be made by modifying your configuration file and setting the fallback option to true. Doing so will cause your app to fallback to your own error page instead of Netlify’s.

Update your nuxt configuration file with the following code:

// nuxt.config.js

export default {
  generate: {
    fallback: true
  }
}

That’s it, move to the next section.

There are other options you can specify within netlify.toml such as custom headers, redirects and more, for that, visit Netlify’s documentation here.

Deploying

Click “Deploy” or push to your master branch (if you have automatic deployments enabled) to trigger a new build and your project should be automatically deployed.

References

The steps found in this article can also be found in their respective documentation page. This article contains references from the following sources:

• Nuxt faq.
• Netlify documentation.

Thanks for reading, cya in the next post!