VS Code

Getting Started With Each Module

• Create Github repo using the CSE 330 repo creator (Check Piazza for the link)
• Navigate to the created repo in Github
• Clone the repo via https to a dedicated folder on your computer

• In VS Code, File > Open the Spring2019-module1-individual-STUDENTID folder that you cloned to your computer

If you followed the above steps correctly, the folder's Git should be configured to your Github repository! I highly recommend creating your Github repo, cloning the folder to a designated spot, and keeping all modules separated for the semester as shown in the image above.

Module 1 -- Using the Git Integration

Note: If you're using Windows, you may need to install Git on your machine first. https://git-scm.com/download/win . You can check if you have Git running by typing git --version in your terminal

• First, open the File Explorer tab on the left, and right click to create a new file, birthday.html

• Ensure VS Code has it marked as an html file (see the file type next to the smiley face)
• Type doc followed by enter, and allow VS Code to generate a basic HTML file for you (use VS Code to your advantage! It can do a lot of your coding for you).
• Save the file, you should see a popup next to the Version Control symbol on the left. VS Code has detected that your project is different than what it is in your remote Github repo.
• To commit, simply type a message in the box and click the check mark above it. To push to your Github repo, click the 3 dots next to the check mark and select 'push'
• Note this is also where you can pull from your remote.

Bonus - Module 1

• If you like your text editor to look pretty, you can go to the Extensions tab and search for different themes. (Check out the Material theme!)
• You can view your settings by clicking CMD + , (Mac) or Ctrl + , (Windows). Search for Theme and choose one that works for you!

Module 2

DISCLAIMER

The following instructions rely on a third-party VSCode plug-in that is not actively maintained. As of 9/18/2020, the last commit in that repository is over a year ago. Use at your own risk! There are several reports that this plug-in no longer works on versions of VSCode later than 1.35.

SFTP Integration (Shipping files to your server)

1. Open the Extensions tab and search for 'sftp'. Download the first one.
2. To use commands in VS Code, type Cmd + Shift + P (Mac), or Ctrl + Shift + P on windows.
3. Type SFTP and open the sftp config command.

Your config.json file should look like the following:

 {
   "protocol": "sftp",
   "host": "YOUR.EC2.DNS",
   "port": 22,
   "username": "YOUR USERNAME",
   "privateKeyPath": "/path/to/your/id_rsa",
   "remotePath": "/home/YOUR USERNAME/public_html/module2",
   "uploadOnSave": true
 }

- Note the uploadOnSave field is optional, but can be nice! - Check the VS Code output for errors in your config.

Additionally: You should notice an SFTP tab on the side of VS Code. Here, you can view the file structure on your server.

Testing Everything Locally

If you would like to avoid having to frequently upload your changes to your instance in order to test your changes, you can optionally set up a local PHP server.

To run PHP locally

Windows

1. Download WAMP http://www.wampserver.com/en/download-wampserver-64bits/
2. Place your project repositories in Wamp's www/ directory, and navigate to http://localhost in your browser. You should see your projects listed here, run php files, and use phpmyadmin.

Mac

1. Download Homebrew. Homebrew is a great package manager for OSx and we will be using it in future modules.
2. Type the following in your terminal and follow instructions

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1. In your terminal, type php -v. If your version is less than 7, update with brew. brew install php
2. In VS Code, search for the extension Php Server. After installing, use VS Code's command pallette with CMD+Shift+P , search for PHP, and select start server. You should be able to view your project in your localhost