See if you can help. I tell you, more than 10 years ago I developed my web applications using html, php, css, js files, etc... and then I uploaded it to a server with Apache and that's it. The fact is that now I have immersed myself in the world of vue.js and some doubts have begun to arise. I have been looking for information but there are many more tutorials than anything else and they are all to the point, I have not been able to find a place where they explain it to me well.
I made an app with Vue.js + bootstrap + node.js + Visual Studio Code. To launch the server while developing I use npm run serve, this is a Node server if I'm not mistaken. So far I think there are no problems.
But to do a production build I use the npm run build command. This last process generates html, js and css files for me. I don't see any trace of anything related to Node.js or the framework I use in development . At this point I began to do tests with the files. I put them on the apache server and I couldn't get the web to open in the browser, after a while of testing and restarting I got it to work. That was what made my head explode.
- Don't I need Node.js on production server? Is it only used in development and doing the build removes the need to use it in production?
- Can you provide me with a simple example where Node.js and webpack intervene and roughly summarize the process from development to production, indicating which tools are involved in each phase?
I have searched a lot, but I swear that no website clarifies anything for me. I was happy with notepad++, xampp, php, css, html, js, mysql, clear separation between client and server, easy deployment...
Thanks in advance!
From what it looks like to me (I could be wrong without knowing more details) you are using npm to build the app and its dependencies and webpack for the app packaging.
All I am going to answer is assuming that this was the case:
When you do
npm run serve
what is done first is take all your source code and pack it into a js file and a css file (this is where webpack is involved, see below). Then, an html file is generated that includes those two files, and finally a node server is started that serves you the html file on localhost. The advantage of having it mounted like this is that if you change some source code, the change is executed hot and you don't even have to press F5 to see it. When you do CTRL+C you just close the development node server and you don't have to worry about it anymore.When you generate the code with
npm run build
, what you are generating are the same js, css and html files but in a minified version to put it into production.If the HTML file that it generates is useful to you, you can use it, but normally what you do is simply include the css and js in the HTML code of your application, since you will surely want to configure the title, meta, etc.
To see a bit of the guts of what you're doing with npm you can take a look at the package.json file, as there you can see what commands you're actually executing.
For example I have something like this:
Those are the commands that are executed when I do
npm run start
,npm run build
andnpm run debug
respectively. That last one helps me to generate JS and CSS but without minimizing. The first starts the development server on port 8080.Sorry in advance if I said something that was not completely accurate, I also come from the old school and it's not that I've been with this for a long time, but I hope it helps you.