1909172

The Nuxt JS Crash Course did not include final building or deploying the finished project, so at the end I later did some exploration at the nuxtjs.org website on doing this.

After development work, typing npm run build in the project directory creates the production version of the application. The command window messages may look something like this.

The built production files will be in the .nuxt subdirectory. To start a server running the built files, npm start is typed. When the server starts, it will show production instead of development.

As before, browsing to http://localhost:3000 will display the production application. To deploy the application to another server, on the internet for example, npm run generate is typed to produce the necessary deployment files. (You should be online if the application referenced another website, otherwise getaddrinfo ENOTFOUND error messages will be generated.) The generated code files will be purely JavaScript and HTML so will not require NodeJS to work. The messages appearing on the command window during the files generation will look similar to the ones before, but will have a different ending, such as this.

As before, each page in the application has a corresponding .js file created. But now, these deployment files will be placed in a dist subdirectory. We can then copy the contents of this to the server we want the application to be on.

When I started my Apache server and browsed to http://localhost/brad/dadjokes/dist/index.html the first time, the application started, but the links for the three command buttons didn’t work as expected. They were referencing directories in the root (such as http://localhost/jokes and http://localhost/about). This will not be an issue if our application is big enough to be on its own domain or subdomain. But now I had to find out how to deploy the files to a subdirectory on the server.

I did a web search on nuxt deploy subdirectory. From Stack Overflow the solution given was to supply the base property for the router element in nuxt.config.js. So I opened the file and included

  router: {base:'/brad/dadjokes/dist/'},

and after regenerating the files again, the application now worked perfectly. (Setting the base to empty string or './' didn’t work.) You can view the application on the web where I later deployed it here.