Getting Started with Web Programming
TODO: Double check MAMP settings TODO: Double check GitHub desktop app settings. Same for Clone GitHub Repo.
This page describes the steps you need to take to get started with web programming.
If you just want to run programs locally on your computer, you need to:
- Get MAMP
- If you're comfortable with the command line, Use Command Line Alternative
- Get a GitHub Account
- Clone a GitHub Repository
- Run a Program Locally on Your Computer
If you also want to edit and host programs, you also need to:
MAMP is a tool that lets you run a local server on your computer. You will need to use MAMP to run programs locally on a computer.
- Download and install MAMP: https://www.mamp.info
- After installing, open MAMP and click Preferences. Select the Ports tab and put "8888" in the box next to Apache and "3306" in the port next to MySQL.
- To run the local server, simply click Start Servers.
Get a GitHub Account
GitHub is a repository hosting service. It allows you to create repositories, where code is stored, and share code with multiple users. Think of it as Dropbox for code.
- Go to http://github.com and create an account
- Have someone in the lab add you to the lab's account (http://github.com/PCLLAB) or to a particular repository (which will be something like http://github.com/PCLLAB/RepositoryName)
- Download the GitHub app from https://desktop.github.com
- During installation, you will be asked to set a default folder
- On a Mac, set the default folder to Applications/MAMP/htdocs
- On a Windows PC, set the default folder to C:\MAMP\htdocs
- Setting the default folder to "htdocs" will ensure that your GitHub repositories are cloned in the default folder in MAMP
Clone a GitHub Repository
Cloning makes a copy of a GitHub repository locally on your computer. These instructions are for cloning an existing repository. If you are starting a new project, you will need to Create a New Repository.
Via Github Desktop
- On GitHub, go to the repository you want to clone (e.g., github.com/PCLLAB/RepositoryName).
- Click the "Clone or download" button on the right side of the screen. Then click "Open in Desktop". This will launch the GitHub app.
- Click "Clone" to save the repository in your "htdocs" folder.
- In the GitHub app, there is a "Sync" button in the top right. Clicking Sync pulls the most recent code from GitHub and pushes any changes you have made locally.
Via Command Line
First you need to have
gitset up. https://docs.github.com/en/get-started/quickstart/set-up-git
Then you can use
git clone <whatever link from github>
- For more detailed information, check the Github documentation or your search engine of choice. https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository
Run a Program Locally on Your Computer
To run a program locally:
- Open MAMP and click Start Servers
- Make sure you have the most recent version of your program by syncing with GitHub
- Go to the local URL to run the program
- The URL for a given repository will be http://localhost:8888/RepositoryName/
- The URL for your particular experiment may be something like the following: http://localhost:8888/RepositoryName/experiment.html
- If you have multiple experiment folders within a repository, your URL may be something like: http://localhost:8888/RepositoryName/E1/experiment.html
Command Line Based Alternative
If you have
npm set up already, you may find it easier to use an package like
http-server to quickly get an experiment running locally.
# install it globally with npm or yarn etc npm i -g http-server # then run it where experiment.html is located http-server # if changes aren't updating on refresh, use -c-1 to disable caching http-server -c-1 # or use npx to avoid a global installation (if you know what you're doing) npx http-server
Get a Text Editor
You will need a text editor to write and edit code. Popular ones are:
More Technical Stuff
For more information about developing plugins, maintaining websites, and really niche things, check out https://learninglab.psych.purdue.edu/docs/