Create a codespace

1. Create a codespace for your prototype by clicking Use this template > Open in a codespace

2. In the codespaces terminal, run:

npm install

npm run dev

Once npm run dev is running, go to the PORTS tab in the terminal and open the URL for your prototype:

If the PORTS tab is not visible for you, right-click next to the other tabs and enable it in the dropdown menu:

Sharing your prototype

This is a temporary URL that's only live while npm run dev is running in your Codespace.

To make the URL accessible for others, change its visibility:

1. Go to PORTS tab
2. On the Visibility column, right click on 🔒 Private
3. Choose Port visibility on the dropdown
4. Change it to Private to Organization

To share a permanent URL, see Get Started (Local development) below.

Saving your codespace into a repository

If you try to git push from your codespace terminal, you will notice there is no repository associated with it.

To save your work, create a new empty repository owned by @github and set your codespace to it by running:

git remote add origin git@github.com:github/YOUR_REPO_NAME.git
git branch -M main
git push -u origin main

Once you have a repository saved, you should finish the configuration under Deploying your prototype.

You don't need to develop locally, however. You can always keep building in the browser, just choose the Coodespaces tab under the Code button:

Start your repository

1. Create a repository for your prototype by clicking Use this template > Create a new repository

2. Set the repository Owner as github so that the deployment is only enabled for Hubbers. Choose whatever name you want.

3. Clone your new repo locally

Developing

You need to have nodejs installed on your machine. If you don't, head here and choose macOS installer.

Once you have the repository cloned on your machine, open the folder on VSCode or the terminal and run:

npm install

npm run dev

You will see the site running on http://localhost:1234

Deploying your prototype

You need to change a few settings on GitHub.com for your prototype to be deployed & visible. This cannot be automated at the moment unfortunately!

1. Go to your repository, then Settings > Pages:
   • Set GitHub Pages visibility to Private
   • Set Build and deployment source to GitHub Actions

2. Go to your repository, then Settings > Collaborators and teams:
   • Click "Add teams"
   • Add github/employees with at least "Read" permission

3. Push your first commit after setting this up, and you will see your prototype available on an auto-generated URL under Settings > Pages. Share this URL with any Hubber and they will see it too!