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:
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 π.
Top comments (0)