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.

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

• Heroku
• Github

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

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

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

{
    "root": "dist",
    "clean_urls": true,
    "routes": {
      "/**": "index.html"
     }
}

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"
  },

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

$ yarn run build

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 

Heroku config

Create a app in heroku.

Select the github option and search for your project:

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.

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 😊.