Rapid Drupal development using Free Tools inc Visual Studio Code IDE

So you want to throw yourself into Drupal but don't know how to set up a local development environment. Maybe you've been playing around for a while but know there must be a better tool and have never heard of this. This is for you. 

In my opinion, as a result of a week trying different ones, Visual Studio Code IDE is second to none. It's awesome. It makes development fast with the help of freely available extensions. They provide syntax highlighting and auto completion and much more. 

The objective for this post is to have WAMP set up. This means you can locally run Drupal websites. WAMP stands for - Windows, Apache, MySQL and PHP. This is the standard stack that you would find on most servers.

We will set up Msys2, a command line tool that mimics a Linux terminal. We can install the required development tools for rapid development. We also use it to manage our SSH keys for logging into remote servers.

Lastly, we can set up Visual Studio Code to work on anything locally or remotely.

VERY VERY COOL!!!

Where you see "Guy" in the paths, you need to replace it with your user name. Where you see a version number of something, you'll need to replace them with yours.

1. Install WAMP

This is our local web server. It has everything we need to make a Drupal website work on our local machine: https://sourceforge.net/projects/wampserver/

Installation of WAMP requires some dependencies are installed first. So be sure to read the installation instructions. Here you will find the some additional downloads: https://stackoverflow.com/a/14557383/2772109

If it doesn't come with the versions you want, visit here to download add ons: https://wampserver.aviatechno.net/

2. Install Git

This tool is a Version Control System. This is how we work together in teams and how we move our changes between environments ie locally or the live website on a remote server: https://git-scm.com/download/win

3. Install Msys2

This is the Linux style terminal that we will use for working on local websites. We use it for managing keys for remote servers. Whilst also being able to use some cool development tools that allow us to work faster locally: https://www.msys2.org/

After installing, you must update the PHP and MySQL to be used by Msys2. Replacing php8.1.15 to what you have/want..

echo 'export PATH="/c/wamp64/bin/php/php8.1.15:$PATH"' >> ~/.bashrc

If WAMP is using MySQL, you'll add this whilst replacing the version number for your one.

echo 'export PATH="/c/wamp64/bin/mysql/mysql5.7.14/bin:$PATH"' >> ~/.bashrc

If your WAMP install has MariaDB instead of MySQL, you'll need that path instead, whilst replacing the version number for your one. i.e 

echo 'export PATH="/c/wamp64/bin/mariadb/mariadb10.4.10/bin:$PATH"' >> ~/.bashrc

Now add Git to the path. Mine is:

echo 'export PATH="/c/Program Files/Git/cmd:$PATH"' >> ~/.bashrc

Test the PHP, Git and MySQL are working with Msys2. You'll need to close and re-open your terminal for the changes to be picked up.

For PHP 

php --version

For MySQL

mysql --version

For Git

git --version

4. Install PHP Composer

This is used to download Drupal code/modules/themes and their dependencies. It is known as a compiler. You can download it and install as you would any other program on Windows: https://getcomposer.org/download/

Add Composer to Msys2 path, this is mine:

echo 'export PATH="/c/ProgramData/ComposerSetup/bin:$PATH"' >> ~/.bashrc

Test that it is installed correctly. You'll need to close and re-open your terminal first for the changes to be picked up.

composer --version

6. Install Visual Studio Code

Now for the IDE that pulls all this together for an awesome developer experience. It stands for Integrated Development Environment. This is where we manage our code and build out our websites. We can also work on remote servers.

Download and install like any other Windows programs: https://code.visualstudio.com/download

Once installed, go to the extensions tab and install the ones we need. Check the setting for each one. Install the ones for:

1. Twig extensions:
   1. Twig code snippets
   2. Twig snippets
   3. Drupal 8 Twig Snippets
2. Remote SSH
3. HTML CSS Support 
4. Bootstrap extensions:
   1. Bootstrap 4 & font awesome snippets.
   2. Bootstrap 5 & font awesome snippets.
5. Babel Javascript
6. Drupal extensions:
   1. Drupal Syntax Highlighting
   2. Drupal 8 JavaScript Snippets
   3. Drupal Smart Snippets
   4. Drupal 8 Snippets (Advanced)
   5. Drupal Intellisense
7. YAML.
8. MSYS2/Cygwin/MinGW/Clang support
9. GitLens — Git supercharged

Once installed, you need to close and re-open the IDE for the changes to take effect. 

Set up Msys2

Go to settings (bottom left) and search "terminal windows".

1. Update the Windows Exec to Msys2 For me it is: C:\msys64\msys2.exe
2. Update the default "Window" to use Msys2.
3. Now, while the terminal is open, select the dropdown where you would open a new terminal and click "Select default profile" and choose msys2.

Remember to close and re-open Visual Studio Code for the changes to take affect.

Remote SSH

For each hosting package, you need to create a key. This key will need to uploaded to the server

Run this command to create your key:

ssh-keygen -b 4096 -t rsa -C "SERVER-USERNAME"

Save file as this and do not use a keyphrase: /home/Guy/.ssh/keys/DOMAINNAME

Copy contents of C:\msys64\home\Guy\.ssh\keys\DOMAINNAME.pub to the servers hosting package, add it to the bottom of the /.ssh/authorized_keys file. This works on Plesk, it may be different for your server.

Locally add the following to C:\msys64\home\Guy\.ssh\config:

Host DOMAINNAME.COM
  IdentityFile /home/Guy/.ssh/keys/DOMAINNAME
  User SERVER-USERNAME

Locally run: 

ssh-keyscan -t rsa DOMAINNAME.com >> ~/.ssh/known_hosts

5. Install Drush with fallback

This very cool commandline tool for Drupal. It allows us to turn modules on/off. Clear the cache. Run cron. Import configuration. Do Drupal database updates and many many more things.

For a full list of commands see this: https://www.drush.org/12.x/commands/all/

Go here for installation instructions