Starting Nuxt SSR app on Azure using the build files

Viewed 811

Based on this Nuxt docs page, once I run yarn build, then "Nuxt.js will create a .nuxt directory with everything inside ready to be deployed on your server hosting."

Based on a few other walkthroughs, there are some other required items: static/**, package.json, and nuxt.config.js.

One of those articles, as well as the instructions on the Nuxt page for deploying to Azure using IIS, says a server.js file is required, but I want to stick with "everything inside ready to be deployed." My Azure App Service is set up for Linux, not IIS, as well.

After I deploy those files/folders, however, npm run start (which maps to nuxt start), throws an error that nuxt is not a recognized command. This makes sense because I haven't installed the packages.

I've also tried starting the ssr app with node .nuxt/server.js and node .nuxt/dist/server/server.js. Neither of these work.

I really want to stick with the stated "Nuxt.js will create a .nuxt directory with everything inside ready to be deployed on your server hosting" instead of copying over the node_modules or having to npm install after deployment.

What files or commands am I missing here, and is this even possible?

  • Node version is 14.16
  • Nuxt version is a clean install of version 2.15.3

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "test-nuxt-app",
    htmlAttrs: {
      lang: "en"
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" }
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {}
};
1 Answers

The default values are ssr: true and target: server by this point, I guess that it's 100% sure that you will need to pull your latest code changes, then install the npm packages and run a command to start your webserver (via a node server).

I do recommend trying target: static and then, generating the project with nuxt generate, then all your generated code will be available as static code in /dist as shown here: https://stackoverflow.com/a/63638062/8816585

Then, you will only need a few things (all the packages will be bundled already) and you could follow the official documentation for Azure Static Web Apps: https://nuxtjs.org/docs/2.x/deployment/deployment-azure-static-web-apps

It's not Azure, but just for debugging purposes, you could try to then just drag and drop the /dist directory and see if it works here: https://app.netlify.com/drop
Ofc, any env variables will be needed (if any). Worked fine with a fresh new project that I've just tested for your question.

If it works there, it will work on Azure or any other place where you can host static files for free like Github pages, Netlify, Surge.sh and alike.

Related