Skip to content

Latest commit

 

History

History
186 lines (123 loc) · 7.42 KB

deployment.md

File metadata and controls

186 lines (123 loc) · 7.42 KB

Deployment

General Guidelines

If you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is making sure Vue CLI generates the built files in the correct location, and then follow the deployment instruction of your backend framework.

If you are developing your frontend app separately from your backend - i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app. You can deploy the built content in the dist directory to any static file server, but make sure to set the correct baseUrl.

Previewing Locally

The dist directory is meant to be served by an HTTP server, so it will not work if you open dist/index.html directly over file:// protocol. The easiest way to preview your production build locally is using a Node.js static file server, for example serve:

npm install -g serve
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist

Routing with history.pushState

If you are using Vue Router in history mode, a simple static file server will fail. For example, if you used Vue Router with a route for /todos/42, the dev server has been configured to respond to localhost:3000/todos/42 properly, but a simple static server serving a production build will respond with a 404 instead.

To fix that, you will need to configure your production server to fallback to index.html for any requests that do not match a static file. The Vue Router docs provides configuration instructions for common server setups.

CORS

If your static frontend is deployed to a different domain from your backend API, you will need to properly configure CORS.

PWA

If you are using the PWA plugin, your app must be served over HTTPS so that Service Worker can be properly registered.

Platform Guides

GitHub Pages

There are a few different ways to deploy as described by GitHub Pages documentation. One way is to publish using a /docs folder on master branch.

Create an initial vue.config.js file to update the outputDir value to match docs. Typically, your static website will be hosted on https://yourUserName.github.io/yourProjectName, so you will also want to update the BASE_URL value to match:

// vue.config.js file to be place in the root of your repository
// make sure you update `yourProjectName` with the name of your GitHub project

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/yourProjectName/'
    : '/',
  outputDir: 'docs'
}

Generate the production build in docs directory with npm run build. Commit the vue.config.js file and the built files docs/*, then push to your repository's master branch. On GitHub, configure your repository's setting to Publish your GitHub Pages site from a docs folder on your master branch

GitLab Pages

As described by GitLab Pages documentation, everything happens with a .gitlab-ci.yml file placed in the root of your repository. This working example will get you started:

# .gitlab-ci.yml file to be placed in the root of your repository

pages: # the job must be named pages
  image: node:latest
  stage: deploy
  script:
    - npm ci
    - npm run build
    - mv public public-vue # GitLab Pages hooks on the public folder
    - mv dist public # rename the dist folder (result of npm run build)
  artifacts:
    paths:
      - public # artifact path must be /public for GitLab Pages to pick it up
  only:
    - master

Typically, your static website will be hosted on https://yourUserName.gitlab.io/yourProjectName, so you will also want to create an initial vue.config.js file to update the BASE_URL value to match:

// vue.config.js file to be place in the root of your repository
// make sure you update `yourProjectName` with the name of your GitLab project

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/yourProjectName/'
    : '/'
}

Please read through the docs on GitLab Pages domains for more info about the URL where your project website will be hosted. Be aware you can also use a custom domain.

Commit both the .gitlab-ci.yml and vue.config.js files before pushing to your repository. A GitLab CI pipeline will be triggered: when successful, visit your project's Settings > Pages to see your website link, and click on it.

Netlify

TODO | Open to contribution.

Also checkout vue-cli-plugin-netlify-lambda.

Amazon S3

See vue-cli-plugin-s3-deploy.

Azure

TODO | Open to contribution.

Firebase

Create a new Firebase project on your Firebase console. Please refer to this documentation on how to setup your project.

Make sure you have installed firebase-tools globally:

npm install -g firebase-tools

From the root of your project, initialize firebase using the command:

firebase init

Firebase will ask some questions on how to setup your project.

  • Choose which Firebase CLI features you want to setup your project. Make sure to select hosting.
  • Select the default Firebase project for your project.
  • Set your public directory to dist (or where your build's output is) which will be uploaded to Firebase Hosting.
// firebase.json

{
  "hosting": {
    "public": "app"
  }
}
  • Select yes to configure your project as a single-page app. This will create an index.html and on your dist folder and configure your hosting information.
// firebase.json

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Run npm run build to build your project.

To deploy your project on Firebase Hosting, run the command:

firebase deploy --only hosting

If you want other Firebase CLI features you use on your project to be deployed, run firebase deploy without the --only option.

You can now access your project on https://<YOUR-PROJECT-ID>.firebaseapp.com.

Please refer on the Firebase Documentation for more details.

Now

TODO | Open to contribution.

Stdlib

TODO | Open to contribution.

Heroku

TODO | Open to contribution.

Surge

TODO | Open to contribution.