Setting up for local development

As we will start a site that requires PHP and MySQL to run, we need to set up a local development environment.

There are many ways that this can be achieved; the most favorable ones are Vagrant and Docker. Oh, and of course, if you're developing a Drupal site, Acquia DevDesktop is a good option as well. This book is highly focused on you developing Drupal on a macOS; however, there are other explanations on how to do this on Windows, and Acquia DevDesktop works on Windows. I will explain how to set up shell on Windows as well, but the only local tool I recommend for now is Acquia DevDesktop as I have had many issues with Vagrant on a Windows machine.

Setting up on Windows

Firstly, since Windows is not a Unix-based operating system, we need to install Git for Windows (https://git-for-windows.github.io). This includes setting up your machine with Git Bash, Git Gui, and Shell Integration.

However, as for Windows 10, it allows Bash (https://msdn.microsoft.com/en-gb/commandline/wsl/about), and the website--https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10--has some great tutorials that explain how to set up.

Setting up on macOS

As a developer, I love macOS, because for me it just works. I have multiple tools that I use and highly recommend, which I will go into more depth further on in this chapter.

What is SSH?

Secure Socket Shell, otherwise known as (SSH), allows us to access our directories and files on our operating system, whether it's on our local development environment or our live web server.

In order to do this on macOS, we need to launch the Terminal application. On Windows, we can use the Bash application that was explained earlier.

We can execute commands with SSH to do this; for example, we can change to another folder/directory using the following:

cd mydirectory

Alternatively, we can create a new folder/directory using this:

mkdir mydirectory

These are just some examples of SSH commands, and I encourage you to take a look into this.

When we are doing this development, especially where we are using dynamic code such as PHP, we need to be able to add other tools using the command line.

Our great development tools for macOS

There are some very important tools that I use for development. These not only make my processes quicker, but they also allow me to enhance my development environment to how I need it.

An example of this is that if I might need to install an add-on quickly, I can do this using Homebrew.

Some of the helpful add-ons I use are as follows:

• Homebrew
• iTerm
• Oh My Zsh

Homebrew

The first important tool is HomeBrew (no, it's not teaching you how to make some alcohol at home). It is a fantastic addition to the shell that allows us to execute and install packages very easily.

If you go to https://brew.sh, you can copy and paste into Terminal and away you go, with very simple commands, such as the following:

brew install curl

What the preceding command will do is to download and install the curl package for us. This is just an example of what it does.

iTerm

As it says on their website:

"iTerm2 is a replacement for Terminal and the successor to iTerm. It works on Macs with macOS 10.8 or newer. iTerm2 brings the Terminal into the modern age with features you never knew but always wanted."

This allows us to make our experience using the Terminal a lot better (https://www.iterm2.com).

Oh My Zsh

This allows us to run commands and shortcuts. We don't have to type out full commands, as we did earlier, and we can use our own commands and shortcuts to achieve tasks a lot quicker (http://ohmyz.sh).

Setting up our local development environment

As with anything, there are a lot of choices for local environments. These are just samples of the ones that are there and what they do.

Native

As macOS is built on a Unix framework, you can use this entirely to run your local host, and its just a case of editing some files on your mac and changing them. There is some great documentation on this at (http://php.net/manual/en/install.macosx.bundled.php).

Acquia DevDesktop

This is an all-inclusive application that allows you to get started and set up with making your Drupal websites locally. We will indeed use this for the entire book. It creates the URL for your local website as well as the database and Drupal core.

We use this at Drupal events, and we are mentoring people new to Drupal (https://www.acquia.com/gb/products-services/dev-desktop).

The next two require VirtualBox. This allows us to create virtual machines on both mac and Windows. From here, we can create our separate machines and download OS images that will allow us to install Linux OS, or if you have a Windows disk, you can install this (https://www.virtualbox.org/wiki/Downloads).

Vagrant

This allows you to create and define what your virtual machine will have and require (https://vagrantup.com).

Vagrant provides the same easy workflow regardless of your role as a developer, operator, or designer. It leverages a declarative configuration file that describes all your software requirements, packages, operating system configuration, users, and more.

One great VM to use for Drupal can be found at (https://www.drupalvm.com).

I personally use this for all local development.

Docker

This again allows you to create and define what your development environment will have, but it uses a thing called containers to achieve this (https://www.docker.com).

Using containers, everything required to make a piece of software run is packaged into isolated containers. Unlike VMs, containers do not bundle a full operating system; only libraries and settings required to make the software work are needed. This makes for efficient, lightweight, self-contained systems and guarantees that the software will always run the same, regardless of where it's deployed.

Terminology

Within Drupal and the community, there is some terminology that we use; the following are some of them along with what they mean:

• Content type: This is an entity type, and the individual content types within it are called bundles; in this case, we have a basic page bundle and an article bundle by default
• Node: A node is a piece of content; this is usually within a content type, and a content type is indeed an entity type
• Taxonomy: This is another name for a category, so we can distinguish types of content based on the category name; this is usually used for filtering content
• Themes: This is what makes our site look the way it is
• Modules: Another name for a plugin that adds functionality to Drupal

Drush and Drupal Console

In Drupal, we have some powerful tools that allow us to run commands to execute on our website. This is all run using the command line; an example of this is that we can download themes and modules directly off Drupal.org just by running one command.

Both Drush and Drupal Console are very similar in what they do, and it's down to preference as to which you prefer. For this book, we will use Drupal Console.

Installing Drupal

For now, we will just install Drupal using DevDesktop; however, we will change how we do this later on.

To do this, open up DevDesktop, then bottom left click on +, and then select New Drupal Site. Then, once the popup appears, click on Install in the row that Drupal 8 is in. This will appear with a popup:

Fig 1.0: Install Drupal 8.x site

Once this is done, click on the Local site:

Fig 1.1

In the preceding Fig 1.1, we can now get our Drupal site up and running.

We can see four lines of content:

• Local site: This is the URL that our website is accessible on locally
• Local code: This is where our code is currently located; further along, there is a little square button on the right, which launches a Terminal window
• Local database: This is the name of our database
• PHP version: This is the version of PHP being used

Getting our basic site

Now that we have downloaded and set up our Drupal site to work on our local environment, let's begin installing our site.

The installer will ask various questions; however, as we are using DevDesktop, we don't need to enter any database connection details, but when we use this on a different local environment or even our production environment, it is all required.

Drupal core structure

In Drupal, we have several locations where our contrib and custom code go. The following figure illustrates the directory and file structure for Drupal 8.x core:

All custom and contrib items need to go into either modules, profiles, or themes.

The recommended structure inside these directories to add the contrib and custom directories. Consider the following examples:

• Modules:
  • /modules/contrib
  • /modules/custom
• Profiles:
  • /profiles/contrib
  • /profiles/custom
• Themes:
  • /themes/contrib
  • /themes/custom

There are other key directories here that don't need to be touched, but there is also a sites directory, which contains our sites configuration to access the database, files storage, libraries, and services.

Downloading modules and themes

Once our site is installed, we need to download our base theme for our site, so we can do the following to get modules or themes:

• Download directly from Drupal.org

https://drupal.org/project/{module or theme name}

• Download using Drush

drush dl project, for example, drush dl bootstrap

• Download using Drupal console

drupal:download project

Using themes

With Drupal, we can start a site without writing any code for a theme, as Drupal core comes with the following accessible themes:

• Bartik
• Seven
• Stark

Apart from these three, there are two others that are used as the entire base of Drupal core--Stable and Classy.

Classy is a subtheme of stable, makes Drupal look the way it does, and adds classes.

However, we want to get started with our own theme. So to do this, we need to open Terminal. As stated earlier, the button in DevDesktop on the right-hand side will launch our Terminal window.

Once this is open, we can download our modules and themes straight into our Drupal site. For this book, we will use Bootstrap as our base theme and then create our own theme:

drush dl bootstrap

This will download the Bootstrap theme (https://drupal.org/project/bootstrap) into our themes directory.

Now that we have Bootstrap downloaded, let's create a really basic theme so that we can add onto it later on. Inside our /themes/custom directory, create a new directory called blueprint.

This is where our custom theme will be stored; inside this, we have the ability to add our frontend structure, which includes our templates, CSS, and Javascript.

Start by creating a file called blueprint.info.yml; note that we have it structured as THEMENAME.info.yml.

In Drupal 8.x, we have adopted the use of YAML files, and you will note that all configuration in Drupal uses this format.

blueprint.info.yml

name: Blueprint
description: Bespoke theme for Drupal 8 Blueprints
type: theme
core: 8.x
base theme: bootstrap
# Regions

What this does is to tell Drupal: Hey I'm a new theme, this is what I do. It's set out like this:

• Name: This is what we are calling our theme, following the same name we have given to our themes directory.
• Description: This is a simple description of the theme, and it shows in the Drupal admin interface.
• Type: This is saying that this is for a theme; if it was for a module, it would be module instead.
• Core: As this is for Drupal 8, we need to specify that it is for Drupal 8.x.
• Base theme: We are leveraging our theme files, styles, JavaScript, and templates off of the bootstrap library. This, of course, can be based on any other theme.

Now that we have done this, we are ready to start making a Drupal site and add it to our custom blueprint theme later on.

Getting involved with Drupal

Before we continue, it is recommended that you register at Drupal.org and set up a profile; this will help you vastly and will allow you to ask questions on Drupal.org, fix bugs, submit bugs, and become part of a fantastic community.

Within the Drupal community, we have two sayings:

Come for the code, stay for the community.

There's a module for that!

Let's get Drupal started!

So, now that we have set up our first Drupal site, we can start with our first website!

There is a lot to learn in this book, so take your time.

Ensure that you have a caffeinated drink to hand or a glass of water, and enjoy unravelling the true power of Drupal!