How to set up a local development environment

(Image credit: Future)

A local development environment allows you to use your own machine to run your website, instead of using one provided by a web hosting company. You can customise the setup without worrying that it'll affect your live site, as well as make and test site development before uploading your site. Taking away risk when building something makes the development process much less stressful.

Another benefit of working locally is that you don't have to be connected to the internet. If you have slow wifi, like to work in the garden or are travelling, there is no need to search for a wifi signal all the time.

The time spent FTPing to a staging site and waiting for your site to refresh really adds up over a day of development. A local environment will let you focus on code and the fun bits of building websites.

This tutorial assumes you are on a Mac, and the tutorial for getting started with Valet focuses on this. For a PC alternative, try Homestead.

A basic knowledge of Terminal is good, although you should be able to follow along, as the commands are all fairly simple. They are mainly to get the prerequisite components installed and running.

After completing this tutorial, you will have set up PHP, Homebrew and Composer on your machine, installed Valet and learnt how to set up local sites.

Download the files for this tutorial.

5 ways to speed up your websites and apps

01. Install Homebrew

Set up a local development environment: Install Homebrew — Start off by installing Homebrew from the terminal (Image credit: Sush Kelly)

First step here is to install Homebrew. Type the following command in your Terminal.

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

02. Install PHP

Set up a local development environment: Install PHP — Make sure that your PHP is version 7 (Image credit: Sush Kelly)

Next we need to install/upgrade to PHP7, so check using php -v. If you need to install you can type:

brew install homebrew/php/php70

If you restart your Terminal window now and type php -v again, it should show v7 installed.

03. Install Composer

You will need to download Composer, and then put it in a directory that is part of your PATH.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

04. Move to your PATH

Set up a local development environment: Move to your PATH — Put Composer in your PATH (Image credit: Sush Kelly)

Now move Composer to a directory within your PATH. Once done, you can check your access to it by typing composer-v.

mv composer.phar /usr/local/bin/composer

05. Check your PATH

If you type echo $PATH, you will see what it contains. If it doesn't, then type the following to add it.

export PATH=$PATH:~/.composer/vendor/bin

06. Require Valet globally

Now we have the pieces installed, we can get on with installing Valet. First. let's check nothing is using port 80. Type the following, and if it returns nothing, we are good to go.

netstat -an | grep "\.80" | grep LISTEN

07. Install Valet

We use Composer to install the Valet package for us, and then we can run valet install.

Composerglobal require laravel/valet
valet install

08. Park/unpark directories

Create a directory for your development sites and tell Valet to serve them. Note that folders inside this can be accessed as sub domains.

# move to your projects directory
cd ~/projects/valet/
valet park

09. Forget directories

In a similar way to park, if you no longer want a folder to serve through Valet just use the forget command from inside the directory.

with spaces //
valet forget

10. Link/unlink directories

You can also link to directories. This allows you to choose the name you use.

cd ~/projects/valet/subproject/
# link the subproject directory to make it accessible at HYPERLINK "http://subproject.dev" \hhttp://subproject.dev
valet link subproject

You can share your local dev url to the outside world. In the directory of your project, type valet share and it will create a URL you can use.

12. Using a database

You will need to install your database of choice – for WordPress, we can go ahead and install MySQL.

brew install mysql

13. Choose a database tool

With a database set up, a tool to import and export data is useful, since we don't have phpMyAdmin or similar with Valet as it is so lightweight.

14. Download Sequel Pro

Set up a local development environment: Download Sequel Pro — Sequel Pro is a straightforward database tool (Image credit: Sequel Pro)

We are using Sequel Pro, as it offers a simple interface. You can download it here.

15. Connect the database

Using the default settings from MySQL, add the following details and test your connection.

Host: 127.0.0.1
Username: root
Password: (leave blank)

16. Set up a WordPress site

Set up a local development environment: Set up a WordPress site — Install the WordPress Core in your Valet directory (Image credit: Sush Kelly)

With everything now in place, set up a WordPress site. Create a new folder inside your Valet directory and install the WordPress Core.

17. Add a database

Set up a local development environment: Add a database — Create a database in Sequel Pro (Image credit: Sush Kelly)

In Sequel Pro, create a new database with the same name as the folder you created. Update the wp-config file to suit.

18. Test it's all working

Set up a local development environment: Test it's all working — Head to the browser and check it's working (Image credit: Sush Kelly)

Now if you open your browser, and navigate to (your-folder).test you should see the WordPress install screen. Follow this through as normal.

19. Taking it further

Valet is not just for running WordPress installs on, it was actually originally created for Laravel development. Whether you are building something bespoke in PHP or using a framework, you can easily create a new site by creating a new directory for it in your root folder.

Generate CSS – the conference for web designers: 26 September, Rich Mix, Shoreditch, London — (Image credit: Future)

Join us on 26 September for Generate CSS, a bespoke conference for web designers brought to you by Creative Bloq, net and Web Designer. Save £50 with an Early Bird Ticket when you book before 15 August 2019.

This article was originally published in issue 287 of creative web design magazine Web Designer. Buy issue 287 here or subscribe to Web Designer here.

Related articles: