Deploying production mode with generated Vue-cli project
Question bit n00b: I created a project with vue-cli using webpack. On my Windows machine, I run "npm un dev" and I get an interface with HMR and so on. Now I want to deploy my application to a production machine - ubuntu on DigitalOcean.
What steps should I take? I'm not very good at the logic behind how it should work. If my ubuntu machine has NODE_ENV installed for production, it won't install any of the devDependancies, and I won't be able to build anything. So I guess I'll have to change that? If so, then it doesn't make any sense as this is a production machine.
And do I need to create another node / express server to serve index.html? Shouldn't it somehow work out of the box?
Thank:)
source to share
TL; DR Build on your local machine and whatever you need will be cataloged ./dist/
, just copy the content on the webroot to your production server and you're good to go.
The webpack template handles most of the things for you.
Step to follow for release:
- Run
npm run build
on your local machine. - Copy the contents of the generated directory
./dist/
to the server website - What is it!
When you run the npm run build
preconfigured build script installs the node environment into production and only builds stuff that should be in production, it also optimizes the code and removes the debugging capabilities. When it comes to dependencies, webpack takes care of this and includes them in the generated javascript files located in ./dist/js/
, so you don't have to deal with copying in the directory node_modules/
. It also copies everything in the directory static
and src/assets
into the directory ./dist/
that needs to be prepared for release. And resolves all links to the new path generated by webpack.
The production server does not have to deal with building the vue application, run the build command on your local machine to maintain developer dependencies on your production server. I recommend not installing webpack and other dev tools on your production server. It just pollutes the server with things that are not needed there. Certain development tools can potentially create many problems on production servers. Therefore, it is best to never install them.
Perhaps you can create your own release script that uses ftp or rsync, whichever you prefer to copy everything in the directory ./dist/
to the production server website. It could be a script in bash if on windows run it in git bash or something similar for example.
Hope this clears up, congratulations on the first release of VUE!
source to share