DEV Community

Cover image for Deploy your Vue aplication in less than 5 minutes.
Miguel
Miguel

Posted on • Updated on

Deploy your Vue aplication in less than 5 minutes.

Begin

Hey guys, performing a deploy tends to be a task commonly portrayed as problematic. Based on that, I wrote this article teaching how to do the same without major complications and in a short time.

Alt Text

First of all it is important that you have an account at:

Starting with git.

This article takes into account that you already have an instantiated vue project and just wanted to deploy it.

Create an empty Git repository.

$ git init
Enter fullscreen mode Exit fullscreen mode

After creating the project repository, we will create a connection between it and our local project.

$ git remote add origin https://github.com/user/repo.git
Enter fullscreen mode Exit fullscreen mode

In your project, create the static.json file with the following content:

{
    "root": "dist",
    "clean_urls": true,
    "routes": {
      "/**": "index.html"
     }
}
Enter fullscreen mode Exit fullscreen mode

Change these lines in the package.json file:

| change the line server to start

  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
Enter fullscreen mode Exit fullscreen mode

After that manages the build in the cli of your application:

$ yarn run build
Enter fullscreen mode Exit fullscreen mode

make sure you have removed the /dist directory from your .gitignore file

All set, let's upload our application to github with the following commands:

$ git add .
$ git commit -m "build: heroku config"
$ git push 
Enter fullscreen mode Exit fullscreen mode

Heroku config

Create a app in heroku.

Alt Text

Select the github option and search for your project:

Alt Text

In the settings tab, press add buildpacks and enter the url:https://github.com/heroku/heroku-buildpack-static

Buildpacks provide framework and runtime support for apps. Buildpacks typically examine your apps to determine what dependencies to download and how to configure the apps to communicate with bound services.

Alt Text

Lastly...

Set enable automatic deploys and deploy branch.

If everything went well, the information that the deployment was successful will appear on your dashboard and your app will be ready for use.

Time is very important, thanks for sharing a little bit of yours with me 😊.

image

image

Top comments (0)