VS Code

Getting Started With Each Module

• Create Bitbucket repo using the CSE 330 repo creator (Check Piazza for the link)
• Navigate to the created repo in Bitbucket
• 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 Bitbucket repository! I highly recommend creating your bitbucket 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 Bitbucket repo.
• To commit, simply type a message in the box and click the check mark above it. To push to your bitbucket 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

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 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/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 get the SFTP integration working well, you don't need to set up a local php server. If you can't get the above working, however, we highly recommend coding all of your projects locally, and only uploading them to your ec2 instance when complete.

To run PHP locally

Windows

1. Download WAMP https://sourceforge.net/projects/wampserver/
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