CatchCoding

How to set up a Perfect Web Development Environment

A development environment is a local setup on your machine, which provides the ability to view and customise your website without the need of a web server.

You’ll often find developers building functionality on a staging server, with considerable use of FTP software. Many developers resort to WordPress and the use of plugins, as it provides functionality without the hassle of code deployment.

All these methods are correct and well known. Unfortunately, they have limitations and can be fairly restrictive in the long term. Therefore, it’s crucial to have a correct development environment set up for a stress-free experience when deploying code.

As you read further, we will cover the following topics with simple and effective examples:

Contents

What is PHP Composer?

Have you ever wondered what composer.json is? It’s commonly found on GitHub repositories when searching up for PHP code. For many developers who are unaware, they end up deleting or ignoring the file. However, that’s not the answer, let’s find out why it’s needed.

The following is a composer.json file from Laravel:

{
    "name": "laravel/framework",
    "description": "The Laravel Framework.",
    "homepage": "https://laravel.com",
    "authors": [
        {
            "name": "Taylor Otwell",
            "email": "taylor@laravel.com"
        }
    ],
    "require": {
        "php": "^7.1.3",
        "doctrine/inflector": "^1.1",
        "dragonmantank/cron-expression": "^2.0",
        "egulias/email-validator": "^2.0",
        "erusev/parsedown": "^1.7",
        "league/flysystem": "^1.0.8",
        "monolog/monolog": "^1.12",
        "nesbot/carbon": "^1.26.3 || ^2.0", // Carbon Package
}

Glance over require, you’ll notice multiple dependencies. Each dependency contains the package name and version, like so:

"vendor/package": "version",

If you have used Laravel before, you definitely must have heard of Carbon, this is one of the many packages Laravel uses as shown in the example above. On calling composer install, each package saves within a vendor folder for you to use.

Therefore, whenever you now see composer.json, it simply means a need for additional code, which the project requires to compile. Let’s get started by installing Composer, then you can browse and select various packages.

How to install Composer for Windows

The easiest way to set up composer for Windows is to simply download the software and run the installation, everything else will be handled for you.

How to install composer on Mac using Brew

Unfortunately, to set up Composer on a Mac is not as simple. You’ll have to use a terminal to get started. Luckily, Homebrew will reduce half your troubles by providing easier installation.

Firstly, open your terminal and run the following, this will install Homebrew for you:

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

Now, complete the installation for Composer by running the following command in your terminal:

brew install composer

Open your terminal and type composer, you’ll see the following:

How to use source code repository tools

A repository hosting service provides efficient code management. As you might have already heard, GitHub and BitBucket are the best options available. Even though both are fantastic, I personally recommend BitBucket solely because of preference.

Why should I use Git? You don’t have to but these three reasons will definitely convince you:

  1. Avoid conflicts with other developers code
  2. Review code prior to accepting changes
  3. Track and revert changes

Let’s get started, I’ll use BitBucket for this example.

Sign up for a BitBucket account, it’s free. Then run the following command in your terminal to create a SSH key:

ssh-keygen -t rsa

This process will prompt you twice, once for the key location and the other for a passphrase. Press enter for both. Once the SSH key is generated, you’ll see the following in your terminal:

Your identification has been saved in /path/.ssh/id_rsa.
Your public key has been saved in /path/.ssh/id_rsa.pub.
The key fingerprint is:
ae:89:72:0b:85:da:5a:f4:7c:1f:c2:43:fd:c6:44:38 user@mac.local
The key's randomart image is:
+--[ RSA 2048]----+
|                 |
|         .       |
|        E .      |
|   .   . o       |
|  o . . S .      |
| + + o . +       |
|. + o = o +      |
| o...o * o       |
|.  oo.o .        |
+-----------------+

Now, copy your public SSH Key:

pbcopy < ~/.ssh/id_rsa.pub

Head over to BitBucket by changing <user> with your BitBucket username:

https://bitbucket.org/account/user/<user>/ssh-keys/
  • Add Key
  • Label: Your_Name
  • Key: Paste your SSH key

This creates a two way encryption allowing you to push changes to your BitBucket account.

Git for Beginners

If you’re the only developer on a project, you only require few Git commands to save changes to your repository.

git init 

What is Git init? It’s a way to initialise a repository by creating a .git subdirectory, where all revisions are saved. (perform once)

git status

View the files you have updated or added to staging.

git add .

Add all updated files to staging.

git status

------ Start Response ------
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:   wp-content/themes/default/style.css
------ End Response ------

git add wp-content/themes/default/style.css

Same as above but add a single file to staging.

git commit -m “commit message”

Comment on the changes you have made.

git push origin <branch_name>

Push changes to a particular branch.

This process can take some time to learn but it’s worth the effort. As you progress with more developers on the same project, the following commands can provide a better workflow.

git branch

Show the branch you are working on.

git checkout -b <branch_name>

Create a new branch, generally used when developing new features as it isolates code and avoids conflicts

git branch -d <branch_name>

This will remove your branch locally, don’t forget to check out to another branch before deleting.

git pull origin <branch_name>

Pull in the latest changes made by other developers. Normally, you’ll be notified of this before pushing your changes.

git reset --hard

Forget all the changes you made and revert back to the previous commit.

git push origin <branch_name> --force

Force push all changes. (not recommended)

git remote add origin <remote_url>

You’ll see this command when creating a new repository on BitBucket. It’s simply the URL to your repository.

git remote remove origin

Remove remote origin, this removes the repository URL Don’t forget to add another remote URL.

Git Merge Command

When you split functionality into multiple branches, you’d perform a merge to get everything into a single branch. However, this normally causes a conflict, where your code overlaps with something else, making the whole process fairly tricky.

Let’s say you have “branch_a” and you want to merge it in with master. You would:

git checkout master
git pull origin branch_a

This pulls all the changes from “branch_a” into the master branch. However, you hit a conflict…

Open the conflicting file using Visual Code. Hover over the conflict and Choose “Accept Incoming Change”. Like so:

Image provided VS
git add .
git commit -m “commit message”
git push origin master

Now all your changes should be merged! However, if you are struggling then I recommend using a free Git client, source tree is currently the best Git GUI.

WampServer for Windows 10

WampServer is the most recommended development environment for Windows, It’s brilliant software that handles PHP, Apache2, MySQL and PhpMyAdmin for database management services.

Install Laravel Valet Mac

There are few options to set up a development environment on a Mac. Laravel Valet and Homestead are the most popular development environments used nowadays. For this example, I’ll demonstrate how to install Laravel Valet:

Open your terminal and enter:

composer global require laravel/valet
valet install

Once complete, you’ll see the following on running valet in your terminal:

How to start MySQL on Mac

In addition to Laravel Valet, you’ll have to set up MySQL for your databases. This should be a straight forward installation with the support of Homebrew.

brew install mysql@5.7
brew services start mysql@5.7

Install MySQL Client on Mac

Where do you create your databases? For this you’ll have to download Sequel Pro, it’s a software for Mac, which supports complete database management.

Open Sequel Pro and login.

  • Username: root
  • Password:

Once logged in, you can create and manage databases:

Sequel Pro Create Database

Setting up our first Laravel project

We are now going to set up our first project. At this point, you must have Composer, BitBucket and Laravel Valet set up. To keep things simple, we will use Laravel for our first project.

How to use a terminal

Before we get started, let’s cover the basics on how to use the terminal.

ls

View all files in the directory, try to use this often to see what you are doing.

cd

Instantly takes you to the home directory.

cd ..

Takes you one level out of a directory.

cd folder_name

Enter a folder, if you type the first few characters of the folder name and press tab. It will auto-complete the folder name for you.

mkdir folder_name

Create a new folder.

rm -rf folder_name

Delete an existing folder.

Setting up our first project

Open your terminal and enter:

valet start

This starts up Laravel Valet. Now enter:

cd
cd Desktop
mkdir Sites

This will create a Sites folder on your desktop.

valet park

Register a root directory for your projects.

mkdir project
cd project
valet link

mkdir project will make a project folder and valet link will create a .test URL for you to view in your browser.

valet links

See all the .test URL’s that you have set up, at the moment you’ll see a http://project.test in your terminal.

composer create-project laravel/laravel .

The above will install Laravel within the project folder, which skips composer install. Start Sequel Pro and create a new database called project. Then open the .env file with Visual Code editor and update the following:

DB_DATABASE=project
DB_USERNAME=root
DB_PASSWORD=

Let’s commit the changes!

git add .
git commit -m "My first commit message"

Your project is now set up locally, view http://project.test on your browser. Create a new repository on BitBucket, remember to ignore the read me file.

Once created, you’ll be provided with a few Git commands, which saves your project to a repository, something like this:

git remote add origin https://<user>@bitbucket.org/<user>/<project_repo>.git
git push -u origin master

Open the terminal at the root of the project and enter the commands. If you face a problem, try to change SSH to HTTPS on BitBucket and re-enter. You’ll see the following in your terminal if you have pushed the changes successfully.

Counting objects: 9, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (9/9), done.
Writing objects: 100% (9/9), 749 bytes | 0 bytes/s, done.
Total 9 (delta 7), reused 0 (delta 0)
To https://<user>@bitbucket.org/<user>/<project_repo>.git
   00000..00000  master -> master

That’s it! Don’t forget to commit your changes every time you update your code.

Let the coding begin!

Leave a Reply

Your email address will not be published. Required fields are marked *