Vue-cli: add deployment instructions

[WillowHQ]

What problem does this feature solve?

The docs should include instructions for how to deploy to an express instance, or Heroku, GCS, or another common IAAS.

What does the proposed API look like?

This would be additional content on the README.md

[LinusBorg]

build produces an HTML file and a bunch of folders with javascript, css and images.

You deploy it the same way as any other javascript frontend code:

1. upload all the stuff inside of /distit to your web server
2. serve it with your web server. How that works depends on the kind of web server and backend stuff you run, so not generic.

I think this is out of the scope of Vue, since it's not specific to Vue or vue-cli.

[Akryum]

Also, anyone can write a vue-cli plugin to deploy apps into any service.

[WillowHQ]

Ok, I actually think it is in scope. As a person coming from react to vue, I quickly searched the react CRA docs and was told exactly how to deploy the app on many cloud services. Not so in Vue. Just because something is obvious to an experienced user doesn't mean that there isn't value in creating documentation to make adoption easier for a new user.

[LinusBorg]

Just because something is obvious to an experienced user doesn't mean that there isn't value in creating documentation to make adoption easier for a new user.

You know what, you are right. I'll re-open this as a discussion topic,

My suggestion:

• We can/should add a very short and generic guide to the CLI docs itself, focussed on "you just upload everything form /dist to your plattform of choice".
• for more specific guides, people could contribute a guide for their platform of choice to vuejs.org/cookbook.
• We would simply link there from the "deploy" chapter in the CLI docs.
• This way, people from the community who are experienced with a given service/platform can contribute with a recipe.

This would keep the CLI docs focused on the CLI itself, while the cookbook recipes, who have a much broader scope suitable for these kinds of topics, can provide guidance for users having these questions.

/cc @sdras @chrisvfritz opinions?

[chrisvfritz]

That sounds like a terrific plan to me!

[multiplegeorges]

This sounds like the way to go.

I have a yarn deploy task that syncs to an S3 bucket for really quick and easy deployment. I'd be happy to add this to a deployment cookbook.

[Akryum]

@multiplegeorges Or maybe do a vue-cli plugin to do this with a single command? 😸

[WillowHQ]

I use Express instances, as well as Firebase hosting. I can add those recipes to the cookbook.

[sdras]

I love this idea! Sounds like you're already thinking this way but I really like how Nuxt does it with a little deployment section and runs through a few common use cases. And yes, of course something more particular could be cookbook. Solid plan everyone, thanks for bringing it up @WillowHQ and follow through @LinusBorg

[multiplegeorges]

@Akryum Here ya go

https://github.com/multiplegeorges/vue-cli-plugin-s3-deploy

Any and all feedback welcome.

[piotrb]

I'd like to know best practices for deploying this to a service like Heroku without having to manually bake in the env configs for the different environments, ie Staging vs Prod.

I've done this in the past by having an express endpoint that would expose specific env variables (in this case it'd be VUE_APP_* as per the convention), and then load them from the server at app start. Doing deploys to different environments with the same codebase is a bit tricky otherwise, since if the built code needs to be changed between environments you're not actually testing the same version each time.

[WillowHQ]

@piotrb that is not related to vue-cli. I would google best practices for deployment and environmental variables maybe ?

[piotrb]

Not my point here though, its more about how do you host it .. especially with vue-cli having a convention around env variables getting injected at build time. You wouldn't be able to say make a docker image out of the app, run it in staging with one set of environment, and then run that same image in production with a different environment.

[andreasvirkus]

@piotrb why not? your Dockerfile would simply need to contain the build as well. For example see vue-cli-plugin-docker

[yyx990803]

Basic deployment tips are in - and platform guides are open to contributions: https://github.com/vuejs/vue-cli/blob/dev/docs/guide/deployment.md