# How to upload a Vue.js App to Digital Ocean With Github
In this tutorial we will upload a Vue.js app from local development to a
[Digital Ocean](https://m.do.co/c/3ec7cdf44173) Droplet
This tutorial assumes you already have a Digital Ocean Droplet, a Github account and
your [Vue.js](https://vuejs.org/v2/guide/installation.html)
app is connected to a github repository with a master branch
1. Open your text editor and navigate to your Vue.js app. Open .gitignore. The /dist folder may not be
commented out. Comment this out by type # before dist/. So it will look like #dist/. This will allow
you to push the dist folder to your master branch on github. In case you were wondering the dist
folder is created when you run npm run build.
2. In your terminal navigate to the master branch verify that all changes have been pushed to github
and the repository is clean.
3. From the command line run ```npm run build``` or run build from the
[Vue ui](https://vuejs.org/v2/guide/installation.html#CLI). In your project you will notice a new
folder called dist.
4. Now use git add, then git commit and push the new dist files to the master branch on github
5. Check your repository on github and veryfy the dist folder was added. This folder most likely will be the
first folder in your repository. If you do not see it then .gitignore may still be ignoring the dist folder.
So proceed to step 6. If the dist folder is in your repository skip to step 7.
6. We will need to remove and cache all files. In the command line type:
1. ```git rm -r --cached```
2. ```git add . or git add --all```
3. ```git commit -m "untrack files in .gitignore"```
This only will have to be done one time, unless
you edit the .gitignore file in the future. Credit given to
[Stackoverflow](https://stackoverflow.com/questions/45400361/why-is-gitignore-not-ignoring-my-files/45400404)
7. In your terminal on the command line, create a branch called production by typing:
```git branch production```
8. Now checkout the production branch by typing: ```git checkout production```
9. We want to move the dist folder from the master branch to the production branch.
In the command line type, make sure to leave a space between -- and dist:
```git checkout master -- dist```
10. Run git status and you should see the new dist file untracked. Lets push it to github. We are going to
push this file to the production branch. So run:
1. ```git add dist```
2. ```git commit -m "deploy to production"```
3. ```git push origin production```
11. Go to Github and verify the dist folder is now in the production branch. On the left side above the folders
and to the left of the "New pull request" tab is a tab, "Branch: master", If the production branch was
created successfully, then the dist folder will be in the production branch.
12. Next lets pull the dist folder into [Digital Ocean](https://m.do.co/c/3ec7cdf44173).
ssh or login to your droplet. Cd to your html folder.
```cd /var/www/html/```
Create an empty folder called "myvuejsapp" by type: ```mkdir myvuejsapp``` Then cd into this new folder.
13. We now have to pull the dist folder from our github repo in the production branch. While in the new folder
called myvuejsapp, in the command line type: ```git pull origin production```.
Type ```ls``` to veryify the folder was uploaded.
14. Next we have to tell the server which folder to open when traffic is coming in form your domain. This
assumes you have a domain name pointing to your [Digital Ocean](https://m.do.co/c/3ec7cdf44173) Droplet.
Open /etc/apache2/sites-enabled/000-default.conf by typing the following in the command line:
```nano /etc/apache2/sites-enabled/000-default.conf```
15. Paste the following into this file, using your domain. I also add a second virtual host changing
ServerName to yourdomain.com. Notice no www.
```<VirtualHost *:80>;
ServerName www.yourdomain.com
DocumentRoot "/var/www/html/myvuejsapp/dist"
Directory "/var/www/html/myvuejsapp/dist">
AllowOverride All
</Directory>
</VirtualHost>```
16. Close the file and restart Apache by typing: ```service apache2 restart```
17. Congradulations your site should now be live!
*** Note: Do not get why markdown is not working in this gist. File has extension .md.
Last active
June 8, 2024 21:51
-
-
Save dukesnuz/dc8a440e076698e36ffcf402d73da7e5 to your computer and use it in GitHub Desktop.
How-to-Upload-a-Vue.js-App-to-Digital-Ocean-With-Github.md
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Tutorial on uploading a Vue.js app to Digital Ocean