Skip to content

Lecture 1.3: Environment Setup, Github

Jump to bottom
DA edited this page Apr 29, 2020 · 9 revisions

Environment Setup

In this part of the course, we will learn how to setup an Apache/PHP/MySql environment on your local machine. A common lingo that you might have heard is the word stack. A stack is typically the word used to denote an environment that is composed of an Operating System (Linux for example), a Web Server (Apache for example), a Database Server (MySql for example) and a Programming Language (PHP for example). So, on production servers that are usually operated by Linux, the stack will be a LAMP (Linux, Apache, MySql, PHP).

In this course, we will look at how to deploy a stack on a personal computer, either a Mac or a Windows, by trying to mirror the setup on a typical production server. We will also show in the videos how we could set up a production server on Digital Ocean but this is optional given that most hosting services are not free.

In order to deploy a stack on our personal computers, we could decide to download and configure Apache, MySql, PHP servers individually or we could use a prepackaged program that manages them all. There are 2 programs that are suitable for this class and they both work on any platform but we recommend using MAMP for Mac and XAMPP for Windows.

MAMP for Mac

  1. Download MAMP and install it. You can use the free version, the PRO version is not necessary for this course.

  2. Once the installation is complete, open the program and go to MAMP > Preferences > Web Server from the menu. Identify where the Document Root is. This is where your application should go. You can change it if you want, for as long as you remember what it is.

  3. From the same Preferences screen, click on the Ports tab and click on the button Set Web and MySql servers to ports 80 and 3306. This will set the ports for your servers to be the default. By doing so, if you go to your browser, you just need to type http://localhost without specifying the port (this implies http://localhost:80).

  4. Restart your server from the main screen. You should see green indicators next to Apache Server and MySQL server. The Cloud indicator is for no use for us in this course.

For more information about the installation process consult the MAMP documentation

XAMPP for Windows

  1. Download XAMPP. It is free.

  2. In the beginning of the process, you need to choose only the following when prompted for service selection:

  • Apache
  • MySQL
  • PHP
  • phpMyAdmin (we will learn more about it later)

  1. The installation folder is C:\xampp by default. You can modify it if you want but make sure to remember where you installed it because the Document Root will be <xampp folder>\htdocs.

  2. You will be prompted to download some additional services after that (example: Bitnami). You do not need them for this course.

  3. Once the installation is complete, open XAMPP and from the Control Panel, click on the Start buttons next to Apache and MySQL.

  4. The labels Apache and MySQL should be highlighted in green if they ran successfully. You will also see the ports 80 and 3306 assigned to them respectively.

For more information about the installation process consult the XAMPP documentation

Your First Page Test

  1. Create a file myfirstpage.php in the Document Root folder. Refer to the installation process to validate where that folder is.

  2. In this file, add the following code:

<?php
echo 'This is my first page, and it works!';
?>
  1. Open a browser, type http://localhost/myfirstpage.php

PHP from command line check

Some applications (such as Composer) use PHP from the command line, so we want to verify which distribution of PHP command line.

You can see info about which php executable command line is using by running the following commands:

$ which php
/Applications/MAMP/bin/php/php7.2.x/bin/php
$ php --version
PHP 7.2.x (cli) (built: Jul 17 2018 11:26:48) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
$ php --ini
Configuration File (php.ini) Path: /Applications/MAMP/bin/php/php7.2.x/conf
Loaded Configuration File:         /Library/Application Support/appsolute/MAMP PRO/conf/php7.2.x.ini
Scan for additional .ini files in: (none)
Additional .ini files parsed:      (none)

This info should reflect an installation of PHP found in /Applications/MAMP/bin/php/ and at version >= 7.2.

If the output you see reflects something different follow these instructions to update your PATH variable


Composer

Composer is a standard packager for applications written in php. It is usually used to help you easily manage the installation and upgrade of third-party open-source applications or libraries that you need to use in your own code. Caligrafy uses several open-source libraries and in order for it to function properly, it relies on composer to automatically download them for you.

Composer for Mac

  1. Open the Command Line

  2. From the Command Line, make sure you are in the /usr/local/bin folder. This is where you will need to install composer. You might need to create it if it doesn't exist in your system. In order to that, run the command `sudo mkdir -p /usr/local/bin.

  3. Once in the /usr/local/bin directory, download and install composer by running the following command:

$ curl -sS https://getcomposer.org/installer | sudo php
  1. This will install a file composer.phar. You need to rename the file composer instead. In order to do this, run the following command:
sudo mv composer.phar composer
  1. Test it out by simply typing composer. You should see an output that shows the version of the installed composer.

Composer for Windows

  1. Download Composer and install it.

  2. During the installation, you will need to specify the location of the command line PHP. Make sure to specify the XAMPP php path. Typically this path is C:\xampp\php\php.exe.

  3. Once the installation completed, restart Cmder by closing the window and reopening it.

  4. Type composer in the command line. The output should show you the version that of the installed composer.


Github

In the previous lecture, we talked about git. Github is the service that we will be using in this course to have a backup repository in the cloud. Github is an industry standard for open-source code. In this section, we will learn how to setup Github and how we can start interfacing with it from the Command Line to upload to Github and to download it when we need it.

Create a Github Account

Create a Github account. You only need the free version for this course.

Generate SSH Keys

In order to interface with Github, we need to setup a key so that Github recognizes the local machine that you will be transferring files from and to.

Mac

  1. From the Command Line, go to the .ssh directory
$ cd ~/.ssh
  1. if an .ssh directory does not exists, you will need to create it
$ mkdir ~/.ssh
$ cd ~/.ssh

(you might need to add sudo before the commands if you don't have admin privileges on the machine)

  1. Run the following command to generate an SSH Key
$ ssh-keygen -t rsa -C "[email protected]"
  1. You will be prompted to enter values. Press Enter all the way through. We will be taking all the default values.

Windows

  1. From the Command Line, go to the .ssh directory
$ cd %home%\.ssh
  1. if an .ssh directory does not exists, you will need to create it
$ mkdir %home%\.ssh
$ cd %home%\.ssh
  1. Run the following command to generate an SSH Key
$ ssh-keygen -t rsa -C "[email protected]"

Add Keys to Github

Now that an SSH key has been created that identifies your machine, you need to add the SSH key to Github. In order to that:

  1. Log in to the account you created on github

  2. From your profile menu go to Settings and then selec† SSH and GPG Keys or click here

  3. In the SSH and GPG Keys section, click New SSH Key

  4. In the Title, enter any title that helps you identify the key. For example: _Personal_Key

  5. In the Key area, you need to enter the public SSH Key that you created in the previous step. In order to do that you need to do the following from the Command Line on your machine:

$ cd ~/.ssh
$ cat id_rsa.pub

The output is a long of string of characters that looks like ssh-rsa [......] [email protected] is the public key. Copy it from the Command Terminal and paste it in the Key area.

  1. Click on 'Add SSH Key`. This adds the newly created to the list.

  2. Let's test it. From the Command Line, type $ ssh -T [email protected]. You might be prompted with a warning. Type yes and hit Enter. The output should look like this:

Hi <username>! You've successfully authenticated, but GitHub does not provide shell access.

The should be yours and that is how you know that you start interfacing with Github.

Create your first git repository

Now that github is setup and that we can interface with it from the command line, let's create our first git repository. The best way to do this is to start by creating a repository on github and then clone it locally on your local machine.

  1. From Github, click on the '+' in the top right menu and select New Repository

  2. Choose a name for your repository. Let's pick my-first-app for example.

  3. Set it to public. You can only create public repositories with the free version of github which is ok for this course.

  4. Check the initialize this repository with README. This will automatically add a README file to the folder. Click Create Repository.

  5. This will take you to the my-first-app repository page. You now need to clone this repository locally. In order to do that, click on the Clone or download button and make sure that in the pop-up that opens up you see Clone with SSH. If it is not the case, click on the link Use SSH.

  6. Copy the address that is provided by clicking in the field or on the button next to the address.

  7. From the Command Line, go to the Document Root. If you don't know what the Document Root, refer back to the Environment Setup section above. Once in the Document Root type the following:

$ git clone [email protected]:yourGithubUsername/my-first-app.git

If all went well, the repository should be downloaded locally. In order to check, type ls. There should be a folder named my-first-app. You should be able to access the folder by typing cd my-first-app.

Tracking changes with Github

In order to track changes the changes that you make on your local machine and upload them to Github, there are 3 commands that you need to be use constantly:

Git status

Git status will give you a status of the changes that were made on the local repository in your machine.

  1. Get a list of all the changes made locally on the repository
$ git status

The output should look like this when no changes have been made

On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working tree clean
  1. From either the Command Line or the Code Editor of your choice, make a change to the README.md file that is in this repository. You can type anything in it for now. Save it and go back to the Command Line and run git status again. The output should now be similar to this:
On branch master
Your branch is up-to-date with 'origin/master'.
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")

Git add

add is the command that allows you to stage the changes. Staging means that you are informing the version control program that the changes that you made are important. This will prevent any attempts to override your code accidentally.

$ git add <name-of-file>

or if you want to add all the changes:

$ git add .

Git commit

commit is the command that allows you to notify the repository that is on Github and anywhere else where it got cloned, that you made a revision to the file. Usually every revision needs a comment associate with it in order to inform others of the changes that you have made.

$ git commit -m 'We modified the README file'

This will commit all the files that got added to the staging and will associate only one message for all of them.

The output should look similar to this

[master 1cb73b6] We modified the README file
 1 file changed, 1 insertion(+), 1 deletion(-)

Git push

push is the command that allows to upload all the changes to the repository in Github.

$ git push

or

$ git push --all

This will push all the committed changes and the output should look like this:

Counting objects: 3, done.
Writing objects: 100% (3/3), 290 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To github.com:your-username/my-first-app.git
   e646ab3..1cb73b6  master -> master

Go to Github and if all went well, the README would have the changes that you made.

You did it!

Clone this wiki locally