Welcome to the A-frame Starter Pack

Below you’ll find instructions to copy (fork) this repository and set it up for your own experiments.

• STEP 01 - Setup your code and Live Site (with GitHub)
• STEP 02 - Setup Your Code locally (with GitHub Desktop, VS Code and Local Preview plugin)
• STEP 03 - Make it Your Own! (Start editing locally and syncing to Github)

GitHub → Live Site → VS Code → GitHub

A quick primer before we start:

• To “fork” a “repo” is to make your own copy of someone else’s GitHub repository of code.
• To “clone” a “repo” is to make a local synced copy on your machine of an online GitHub repository of code.
• We are using Github and GitHub Pages for our online code and live site.
• We’re using VS Code and GitHub Desktop to edit and sync a local copy of our code with our online code.

STEP 01

Setup your starting repo

1. Login OR Create a GitHub account (if you don’t have one).
2. Go to the example code repo (https://github.com/sheiva/aframe-starter-pack)
3. Fork this repository (button in the upper right)

Publish Your Live A-Frame Site

1. Go to your forked repository on GitHub in your browser.
2. Click Settings → Pages.
3. Under Branch, select:
   • Branch: main
   • Folder: /root
4. Click Save.
5. Wait a couple of minutes for GitHub Pages to publish your site.
6. Reload this “Pages” window in GitHub and get your new live site link!

Yay!

Now you have access to both types of links you’ll submit to Canvas: (1) your live site code, and (2) a link to your code in your repo

When you are asked to submit your work in class, submit:

1. Your GitHub Pages link (your live site)
2. Your repository link (your code)

STEP 02

Edit a copy of your code locally and keep everything synced with your online Github repository and live Github Pages site:

Download the Software

1. Download and install GitHub Desktop.
   Open GitHub Desktop and sign in with your GitHub account.
2. Download and install Visual Studio Code (VS Code).

Clone Your Fork to Your Computer

In other words, make a local connected copy of your github repository

1. Open GitHub Desktop.
2. Click File → Clone Repository.
3. Select the repo you just forked in your GitHub account.
4. Choose where you want the project saved on your computer.
5. Click Clone.

Open the Project in VS Code and Preview Your Page Locally

1. In GitHub Desktop, go to: Repository → Open in Visual Studio Code.
2. In VS Code, open the Extensions tab.
3. Search for and install Live Preview by Microsoft.
4. Right-click index.html and choose Show Preview.
5. Your page should open in a new window in VS Code so you can preview it while you work.

STEP 03 - Now make it your own!

Congratulations! You've set up everything to get going with your own experiments with this Starter Pack! Now, repeat this following steps (Edit Your Code Locally -> Save, Commit and Push) as you continue editing your code. This way your work isn't just saved to your computer but is synced to your Github account (and automatically updates your Github Pages live site).

Edit Your Code and Preview it Locally

1. In VS Code, open the index.html file in the main directory.
2. Add your name in the index.html after "by".
   • "webAR experiments in A-frame <b>by __YourName____</b>."
3. Right-click index.html and choose Show Preview.
4. Your page should open in a new window so you can preview it while you work.

Save, Commit, and Push Changes to Github

As you work, remember to not just save your files in VS Code but also periodically sync your work to GitHub:

1. Go back to GitHub Desktop where you will see your changed files listed.
2. Write a commit message describing what you changed in the bottom left.
3. Click Commit to main - Mac Shortcut: Cmd + Enter | PC Shortcut: Ctrl + Enter
4. Click Push origin - Mac Shortcut: Cmd + P | PC Shortcut: Ctrl + P