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