0

I'm using VueJS and Nuxt to build myself a website. I have encountered a new problem.

When I run npm run build and then npm run start everything works fine. Everything is loaded and ready. Everyone is getting a /dist folder when they run npm run build but I did not. I guess I don't need it if npm run start works just fine without it.

Just checked that I have no index.html in my project but how does then the npm run start work?

When I upload the built website to my Bluehost. It only shows me the folder list and not a running website. I should npm run start from bluehost? I have no idea what to do next. The image is below.

Is npm run generate the only normal way to upload a website?

kissu
  • 40,416
  • 14
  • 65
  • 133
Branko Anokic
  • 35
  • 2
  • 6

2 Answers2

1

First thing .. npm run start/build/dev etc are just NPM scripts that are specified in the package.json under the scripts section. They can be anything, but according to Nuxt docs this is the default:

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }

So that's what's actually running when you doing those.

That said, I think where you are getting confused is that there's two ways to host these projects. As a server, or as a static site.

When you are running it locally you are running it as a server and that's why you can browse to localhost in your browser and see what you are working on and that's why there's no index.html.

It's fine to do that and then host it statically though. That's where the building part comes in. Usually webpack compiles everything into a bunch of normal html and other assets that can be read by any browser (without the need of them being actively served (like what your dev server is doing locally).

Try: Setting target: 'static' in your nuxt.config.js

export default {
  target: 'static' // default is 'server'
}

and then run your: (which is actually running nuxt generate)

npm run generate

The other option is to host stuff online as a running server, which you can do on hosting like Heroku or Digital Ocean or AWS .. and you usually make a build script that will set it up and serve it, like how your local dev server was, but online. But often hosting things statically is fine.

Hope that sheds a bit of light on the situation. Write a comment if you still having trouble.

jpmc
  • 1,147
  • 7
  • 18
0

TLDR: both generate and build are fine but they aim at different results.
You'll need to either set target: static or target: server respectively for it to work.

This is an excellent answer that can explain some of the differences and various ways to build your app (npm run build vs npm run generate): https://stackoverflow.com/a/63638062/8816585

Here is an official article of the benefit of target: static.

I'd recommend going full static too, if you can. It will be cheaper and can be served with a CDN easily (like on Netlify), hence more performance and less point of failure.

Of course, there are some exceptions. If your app is password protected with a lot of private content, you may find no benefit into a static build. If it's fine to display the content and you know what it will be ahead of time (like a blog), go static!

PS: you do not see any /dist directory probably because it's ignored in your .gitignore (default when you generate a Nuxt project).

Relevant pages in the documentation:

kissu
  • 40,416
  • 14
  • 65
  • 133