Deploying Your App

Let’s deploy your app to Digital Ocean.  To do so you’ll need to create a GitHub repo and push your code to the repo.  Then you’ll create a  Digital Ocean account (if you don’t have one already) and launch a app using the GitHub repo.

Create a GitHub Repo

Log into GitHub.com and click the New button to create a new repository.  On the Create a New Repository page, enter csci432-project1 for the name of the repo and press the Create repository button.

After the repo has been created you’ll be redirected to the repo’s web page.  In the Quick setup box, make sure the SSH tab is selected.

In the next step, you’re going to run the commands listed below the section titled …or create a new repository on the command line. so keep the GitHub page open.

Push Your App’s Code to Your Repo

In the last tutorial we created a Vue project named project1.  Open the project1 directory in Visual Studio Code.

Next, open the terminal in VSC.  Change your current working directory to project1/dist.

Now, execute the following commands in the terminal but replacing USERNAME with your GitHub username.

$ git init
$ git add *
$ git commit -m "first commit" 
$ git branch -M main
$ git remote add origin git@github.com:USERNAME/csci432-project1.git
$ git push -u origin main

Now reload your browser and you should see that the files that are in the dist directory are now also in your GitHub repo.

Host Your App on Digital Ocean

Follow the instructions in my tutorial titled Hosting a Website on Digital Ocean.  When doing so, remember the following:

  • If you’ve previously hosted a site on Digital Ocean using a GitHub repo, before selecting a repository, you will need to Edit Your GitHub Permissions.  When you edit your permission, add your new  csci432-project1 repo to the list of repos that you want to allow Digital Ocean to have access to.
  • When you are asked to enter in the name of the GitHub repository, enter USERNAME/csci432-project1 (replacing, of course, USERNAME with your GitHUB username).
  • When asked for a Source directory, leave as /.

Email Your Instructor

After you’ve lauched your app on digitalocean.com, email your instructor the URL for your app.