Task 5: uploading to the web
To publish your prototype, you must:
- push your prototype to the remote GitHub repo
- deploy your site on Heroku
For this task, we recommend using the integrated terminal that comes with Visual Studio code.
Publish prototype to GitHub
These instructions assume that you have prototype changes ready to push to GitHub.
To push your prototype changes to GitHub for the first time, you must:
- create a new repository (remote) on GitHub
- initialise the local directory as a Git repository
- add and commit your files
- push the staged commits to the remote repo
Create a new repository
Create a remote empty repo in your organisation on GitHub by selecting New in your GitHub account dashboard.
Select Public so anyone can collaborate on your repo.
To avoid errors:
- do not select Initialise this repository with a README
- set Add .gitignore to None
- set Add a licence to None
You can add these files after your project has been pushed to GitHub.
When you’re done, select Create repository.
Initialise the local directory as a Git repository
Go to your juggling license prototype directory using the terminal. In Visual Studio code, opening a terminal in the text editor window will automatically
cdyou into your prototype repo.
Make the prototype directory into a local Git repo:
The default branch created by the
git initcommand is called
master, which is a potentially offensive term. Rename the current branch to
git branch -M main
Add and commit your prototype files
Add all the files in the local repo and stage them for commit:
git add .
You can check to see what files have been added by running:
Commit the staged files:
git commit -m "COMMIT-MESSAGE"
COMMIT-MESSAGEis the message describing the commit. This is your first commit to the repo so you can replace
Push the staged commits to the remote repo
Go to the remote repo in GitHub. This is the empty repo you created earlier.
Select the Code button.
Select the button next to the url to copy the url to your clipboard.
Back in the terminal, link the local repo to the remote repo:
git remote add origin REMOTE-REPO-URL
REMOTE-REPO-URLis the url you copied.
Push the changes in your local repo to the remote repo:
git push -u origin main
You have now created a remote version of your prototype on GitHub. Go to the remote repo and check that all your files are there.
Accounts with two-factor authentication (2FA) will not be able to push commits first time and will need to generate a personal access token.
GitHub and 2FA
If your GitHub account has 2 Factor Authentication (2FA) turned on, you might need to create a personal access token to push your first commit to a remote repo.
In the terminal, you’ll be asked for your:
- username, which will be the same one you used to log into your GitHub account
- password, which will be a personal access token created from within your GitHub account
Select your profile photo on any GitHub page, then select Settings.
Select Developer settings.
Select Personal access tokens.
Select Generate new token.
You may be asked for your account password at this point.
Give your token a name and select the repo checkbox.
This gives you full access to private and public repositories from within the command line.
Select the Generate token button once you’re done.
To use the token, select the copy icon to copy the token to your clipboard.
Save the token somewhere safe. Once you navigate away from the page you will no longer be able to view it.
You can now use the token in the terminal to perform Git operations:
git clone https://github.com/username/repo.git Username: your_username Password: your_token
Deploy with Heroku
Go to www.heroku.com and log in if you’re not already logged in.
Select New, then Create new app.
Choose an App name.
Names in Heroku have to be unique across all the users of Heroku. It can be helpful to add your name or organisation to the start of the name to make it unique. For example ‘yourname-juggling-prototype’.
Select Europe as the region - this is not important but makes your prototype a bit faster.
Select Create app.
Set Deployment method as GitHub, then select Connect to GitHub.
In the popup, select Authorize Heroku.
In the repo-name field, type all or some of your repo name, as it is on GitHub. Select search.
Select connect on the right of your repo.
Scroll down to the Manual deploy section and select Deploy branch.
Secure your prototype
One more thing: you need to set a username and password or the prototype will not run online.
Select the Settings tab.
Select Reveal config vars.
Set KEY as the word
Set VALUE as a username of your choice
Add another KEY and VALUE.
Set KEY as the word
Set VALUE as a password of your choice.
You can now select Open app to see your prototype online.