Skip to content

Webification environment setup

Josh Bodner edited this page May 15, 2024 · 24 revisions

Never done anything with git in your life? Don't worry about it! Follow this step by step guide to get your environment set up and ready to make some puzzles.

  1. Download git. Git is what we use to push all the files from your local machine into our Github repository (repo). Github IS A COMPLETELY DIFFERENT THING than git. Github is the website you're currently on and reading this. Git is a program you will download from this website. The default download should be fine, as well as all the default options during installation.
  2. Download Visual Studio Code. This is technically optional, but is very highly recommended because it makes working with PuzzleJS much easier than the alternative, which is applying a command-line flag to your browser. Visual Studio Code is available to download from the Microsoft Store, or from here. Again, the default download and install options should be fine.
  3. Install the Live Preview extension in VS Code. Once you've opened VS Code, click the boxes icon in the sidebar to open up the Extensions pane:

    image
    Search for "Live Preview", and then on its page, click the blue Install button. Once it's installed, it'll change to say Uninstall:

    image
  4. Set the extension to open pages in your browser. Next to the install button, click the gear icon, then extension settings:

    image
    On the settings page, change the "Open Preview Target" option to "External Browser":

    image
  5. Access the puzzle repository. In this example, let's say this is a private repo located at https://github.com/jbodner09/pd2024-webification. You'll first need the repo's owner to add you as a contributor. Talk to them, and once they've sent the invite, you'll either get an email, or just go directly to that repo in your browser, and it will ask you to confirm that you want to be a contributor.
  6. Once you're a contributor, you'll be allowed to clone the repo. To do that, look for the green Code button, and click it to open the dropdown. In the dropdown, the default clone method of HTTPS should already be selected, so look for a button to the right of the URL that says "Copy url to clipboard" when you hover over it. Click it to copy the url, which you'll need in the next steps.


    image
  7. Open a Terminal session (on Windows 11) or a command prompt (on Windows 10). If you're on Windows 11 and Terminal isn't installed, you can get it from the Microsoft Store, or you can just use a command prompt. The easiest way to open a command prompt is to hit the Windows Key + R to open the Run dialog, and then type "cmd":

    image
    Once you're in the command prompt, navigate to the folder you want your clone to live in using the "cd" command. You can go directly to any folder from anywhere else by typing its full name, for example cd C:\Users\Josh\Repos. Note that if any folder in the path contains spaces, you'll need to wrap the entire path in "quotes", like cd "C:\Users\Josh\Software Projects".
Clone this wiki locally