Will AI replace front end developers 2023 09 06T150546.125 3
Will AI replace front end developers 2023 09 06T150546.125 3

Establishing a fresh development environment on a new machine might seem overwhelming, but it is a crucial step for ensuring a seamless workflow. This in-depth guide is designed to lead you through the steps of setting up your Macbook Pro (2019 edition) to actively support PHP and Drupal development. Starting with crucial security measures, the guide progresses to the installation of necessary tools and the configuration of virtualization, providing a comprehensive walkthrough for all the essential steps to kickstart your development journey.

The primary objective of this article is to offer developers a comprehensive guide for setting up and configuring all essential tools required for full-stack development. While some steps may cater specifically to Drupal development, these will be clearly indicated for the benefit of anyone interested.

  • Essential Tools Installation

Developers will require the installation of specific tools, namely: Xcode, brew, git, curl, vim, and nvm.

Xcode is a package that provides crucial command-line tools for developers, such as git and gcc.

Homebrew acts as a package manager, streamlining and expediting the setup process. Using Homebrew facilitates the installation of other vital tools like vim (for file editing), git (for efficient version management), and curl (primarily for installation purposes).

bash

xcode-select –install
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”
brew install vim
brew install git
brew install curl

 

Every developer needs a text editor; hence, installing one is pivotal. Options like Atom and Sublime are viable, but this guide focuses on Visual Studio Code (VSC). A section at the end of the article will highlight some useful VSC extensions. Regarding terminals, choices include Hyper, iTerm2, or the standard terminal, but this guide opts for iTerm.

bash

brew install –cask iterm2
brew install –cask visual-studio-code

 

Once Visual Studio Code is installed, launch the application and press CMD+SHIFT+P. Search for “install code command in path” and select it. This action enables VSC usage through the terminal, aligning with the guide’s approach.

  • Node Installation

For Node installation, utilize nvm. After installing nvm, follow the instructions provided by brew info to install Node.

bash

brew install nvm
brew info nvm
nvm install 12.11.1 # Preferred Node version

 

  • Apache Setup

Begin using httpd from brew by first stopping and unloading apachectl with the following commands:

bash

sudo apachectl stop
sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null

 

Subsequently, employ brew to install httpd. Post-installation, familiarize yourself with useful commands for starting, stopping, restarting, and accessing error logs.

bash

brew install httpd
brew services start httpd
brew services stop httpd
brew services restart httpd
tail -f /usr/local/var/log/httpd/error_log

 

By following these steps, developers can seamlessly set up their Macbook Pro (2019 edition) for efficient PHP and Drupal development, ensuring a smooth and productive workflow.

 

Upon completing the installation process, configuration of certain files is necessary, preferably using Visual Studio Code. If not, any text editor will suffice.

bash

code /usr/local/etc/httpd/httpd.conf

 

Locate the line stating “Listen 8080” and modify it to “Listen 80”.

Next, alter the “DocumentRoot” from “/usr/local/var/www” to “/Users/your_user/Sites” and make the same adjustment for the directory tag directly below it.

Change “AllowOverride” from “None” to “All” and uncomment “rewrite_module” to enable it.

Adjust the “User” and “Group” lines to prevent future permission issues. Substitute “User” with your_user and “Group” with staff.

Uncomment the “ServerName” line and set its value to localhost.

For the subsequent steps, create a Sites folder where all sites will be stored: mkdir ~/Sites. Then, create an index.html file to test the configuration:

bash

echo “<h1> Apache config works!</h1>” > ~/Sites/index.html

 

Restart httpd:

bash

brew services stop httpd
brew services start httpd

 

Tip: Double-check the user if issues persist.

  • Database Setup

Utilize MariaDB (similar to MySQL) for the database:

bash

brew update
brew install mariadb
brew services start mariadb

 

After installation, modify the MySQL server password by running:

bash

sudo /usr/local/bin/mysql_secure_installation

 

It’s advisable to install an interface for interacting with databases. Choices include TablePlus or Sequel Pro; for instance, let’s use TablePlus:

bash

brew install –cask tableplus

 

OR

bash

brew install –cask sequel-pro

 

If Mac doesn’t trust any of these, go to system preferences > security and privacy, then click “Open Anyway” in the General pane.

Create a new connection with default settings, using the password set in the previous process (e.g., root).

To stop mariadb, execute:

bash

brew services stop MariaDB

 

  • PHP Installation

As brew has deprecated certain PHP versions, utilize the tap from shivammathur for PHP installation:

bash

brew tap shivammathur/php

 

Install various PHP versions to switch between them:

bash

brew install shivammathur/php/php@7.1
brew install shivammathur/php/php@7.2
brew install shivammathur/php/php@7.3
brew install shivammathur/php/php@7.4
brew install shivammathur/php/php@8.0

 

It’s advisable to restart the terminal at this point for all configurations to update accordingly.

 

Now, let’s link the required PHP version. If a version is already installed, execute:

bash

brew unlink php && brew link –overwrite –force php@7.4

 

If not, run:

bash

brew link –overwrite –force php@7.4

 

During the linking process, two echo commands will appear. Copy and paste them. Subsequently, use php -v to verify the installed PHP version.

While PHP is installed, Apache needs configuration for PHP as well.

Open the httpd file once more:

bash

code /usr/local/etc/httpd/httpd.conf

 

Locate the ‘mod_rewrite’ module and append the following modules:

bash

#LoadModule php7_module /opt/homebrew/opt/php@7.1/lib/httpd/modules/libphp7.so
#LoadModule php7_module /opt/homebrew/opt/php@7.2/lib/httpd/modules/libphp7.so
#LoadModule php7_module /opt/homebrew/opt/php@7.3/lib/httpd/modules/libphp7.so
LoadModule php7_module /opt/homebrew/opt/php@7.4/lib/httpd/modules/libphp7.so
#LoadModule php_module /opt/homebrew/opt/php@8.0/lib/httpd/modules/libphp.so

 

Ensure only the module corresponding to the current PHP version remains uncommented—in this case, we’re using version 7.4.

As directory indexes currently cater only to HTML, update them to include PHP. Search for:

bash

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

 

Modify it to:

bash

<IfModule dir_module>
    DirectoryIndex index.php index.html
</IfModule>

<FilesMatch \.php$>
    SetHandler application/x-httpd-php
</FilesMatch>

 

Lastly, uncomment the deflate module line:

bash

LoadModule deflate_module lib/httpd/modules/mod_deflate.so

 

Restart httpd using brew. Now, to verify everything is set correctly, use the PHP function phpinfo(); to check the PHP version Apache is using. After executing the echo command, navigate to localhost/info.php to view the PHP version in use.

A useful script for switching between PHP versions, although optional, can save time if multiple PHP versions are required:

bash

curl -L https://gist.githubusercontent.com/rhukster/f4c04f1bf59e0b74e335ee5d186a98e2/raw/adc8c149876bff14a33e3ac351588fdbe8172c07/sphp.sh > /opt/homebrew/bin/sphp

chmod +x /opt/homebrew/bin/sphp

 

Once downloaded, it’s straightforward to use. Simply run sphp followed by the desired PHP version. For instance:

bash

sphp 7.3

 

Lastly, perform a brew update and brew upgrade. If anything isn’t functioning correctly, it might necessitate an httpd restart.

 

  1. Virtual Hosts

To configure virtual hosting in Apache, which allows testing multiple sites concurrently, we’ll utilize an existing Apache functionality called virtual hosting. This process will involve the use of Dnsmasq, a topic we’ll delve into shortly.

Start by editing the previously mentioned file:

bash

code /opt/homebrew/etc/httpd/httpd.conf

 

Uncomment the following lines:

bash

LoadModule vhost_alias_module lib/httpd/modules/mod_vhost_alias.so
# Virtual hosts
Include /opt/homebrew/etc/httpd/extra/httpd-vhosts.conf

 

The final step is configuring the vhosts file:

bash

code /opt/homebrew/etc/httpd/extra/httpd-vhosts.conf

 

In this file, Apache will be directed to locate various index files and the designated server alias. It’s advisable to comment out any previous configurations.

For Drupal configurations, it might be a bit complex. Here are examples for both Drupal and regular setups:

Drupal Configuration:

bash

<VirtualHost *:80>
    ServerName test
    ServerAlias *.test
    VirtualDocumentRoot /Users/your_user/Sites/site_directory/docroot
    ErrorLog “/private/var/log/apache2/site_directory.local-error_log”
    CustomLog “/private/var/log/apache2/site_directory.local-access_log” common
    <Directory “/Users/your_user/Sites/site_directory/docroot”>
        AllowOverride All
        Require all granted
        Options FollowSymLinks
    </Directory>
</VirtualHost>

 

Other Configuration:

bash

<VirtualHost *:80>
    DocumentRoot “/Users/your_user/Sites/your_folder”
    ServerName *.test
</VirtualHost>

 

Ensure the user used in the configuration file is consistent. Your_folder would represent the folder where the index files are stored.

Dnsmasq Configuration:

As previously mentioned, Dnsmasq facilitates dynamic host changes. For this guide, we’ll use “.test” as the domain.

Begin by installing Dnsmasq:

bash

brew install dnsmasq

 

Edit the configuration file:

bash

echo ‘address=/.test/127.0.0.1’ > /opt/homebrew/etc/dnsmasq.conf

 

Commence Dnsmasq and include it in the resolvers:

bash

sudo brew services start dnsmasq
sudo mkdir -v /etc/resolver
sudo bash -c ‘echo “nameserver 127.0.0.1” > /etc/resolver/test’

 

To verify if the setup is correct, attempt to ping any .test domain, such as test.test:

bash

ping test.test

 

A successful ping indicates the completion of your environment configuration!

 

  1. Xdebug

Xdebug is an invaluable tool for debugging PHP code, especially when paired with Visual Studio Code, greatly enhancing web development. However, Xdebug isn’t universally standardized for PHP; its versions vary based on the PHP version. For PHP 7.1 and later, distinct Xdebug versions are available.

For PHP 7.1:

bash

sphp 7.1
pecl uninstall -r xdebug
pecl install xdebug-2.9.8

 

For PHP 7.2 and beyond:

bash

sphp 7.2
pecl uninstall -r xdebug
pecl install xdebug

 

Now, let’s configure Xdebug to ensure proper functionality. Initially, remove the zend_extension=”xdebug.so” line in the php.ini file. Although the example uses PHP version 7.4, the process remains consistent for all versions. Remember, if you switch versions later on, this step needs repetition.

Open the php.ini file:

bash

code /opt/homebrew/etc/php/7.4/php.ini

 

Create a new config file for Xdebug:

bash

code /opt/homebrew/etc/php/7.4/conf.d/ext-xdebug.ini

 

Paste the appropriate configuration based on the PHP version:

Prior to 7.2:

bash

[xdebug]
zend_extension=”xdebug.so”
xdebug.remote_enable=1
xdebug.remote_host=localhost
xdebug.remote_handler=dbgp
xdebug.remote_port=9000

 

After 7.2:

bash

[xdebug]
zend_extension=”xdebug.so”
xdebug.mode=debug
xdebug.start_with_request = yes
xdebug.client_port = 9003 #Depending on the VSC configuration
xdebug.idekey = VSCODE #Only needed if you are using VSC

 

Restart httpd and check the php.info page again; you should now find Xdebug in the correct version on the info page.

For finalizing the Visual Studio Code (VSC) configuration, head to the section dedicated to VSC setup, where all the necessary steps for configuring the application are detailed.

 

  1. Key generation (ssh)

Creating SSH Keys:

If you’re planning to work with Git repositories or any other tool requiring SSH keys, follow these steps to generate a public and private key.

  • Generate the key using ssh-keygen -t rsa. During the generation, it will prompt for a location; press Enter to use the default.
  • For the passphrase, you can press Enter or type something depending on the level of security you desire. It’s common to leave it empty.
  • The private key will be stored in the .ssh folder as id_rsa, while the public one will be named id_rsa.pub. Copy the public key using the command:

bash

pbcopy < ~/.ssh/id_rsa.pub

 

Custom Tweaks:

Visual Studio Code (VSC):

For VSC, there are some useful customizations and mandatory steps for Xdebug integration:

  • Xdebug Setup:
    • Install the PHP Debug extension.
    • Go to the run and debug section in VSC and click on “generate a new launch.json.” Ensure the port matches the one configured in Xdebug.

Example launch.json:

json

{
    “version”: “0.2.0”,
    “configurations”: [
        {
            “name”: “Listen for XDebug”,
            “type”: “php”,
            “request”: “launch”,
            “port”: 9000
        }
    ]
}

 

  • Allow Setting Breakpoints Everywhere:
      • Go to Code > Preferences > Settings and search for “breakpoints.” Check “Allow setting breakpoints in any file.”
  • Useful Extensions:
    • Beautify
    • Bracket Pair Colorizer
    • Drupal Syntax Highlighting (if using Drupal)
    • ESLint
    • Git History
    • GitLens
    • Highlight Matching Tag
    • Prettier – Code Formatter
    • Rainbow Brackets
    • Stylelint

Shell:

Use the following command to show hidden files in Finder and the terminal:

bash

defaults write com.apple.Finder AppleShowAllFiles true

 

Go to iTerm2 > Install Shell Integration.

These customizations and tweaks will enhance your development experience and streamline the use of specific tools like Git and Xdebug.

Conclusion

In conclusion, the process of setting up a development environment involves several intricate steps and configurations. From configuring tools like Xdebug for PHP debugging to generating SSH keys for secure access to repositories, each step plays a crucial role in facilitating a seamless development experience.

Additionally, customizing environments, such as Visual Studio Code, with specific extensions and settings tailored to individual needs significantly enhances productivity and coding efficiency. These adjustments, combined with shell integrations and tweaks, contribute to a more streamlined and efficient workflow.

The outlined procedures, whether in generating SSH keys, configuring Xdebug, or customizing development tools, aim to equip developers with the necessary resources and insights to optimize their development environments. Embracing these steps can lead to a smoother development journey, fostering better code management, debugging, and overall project execution.

© 2013 - 2024 Foreignerds. All Rights Reserved

facebookFacebook
twitterTwitter
linkedinLinkedin
instagramInstagram
whatsapp
support