How-to-Upload-a-Vue.js-App-to-Digital-Ocean-With-Github.md

Deploy-a-Vue.js-App-to-Digital-Ocean-Using-Github.md

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

Tutorial on uploading a Vue.js app to Digital Ocean