How to set up a local development environment

Last updated: 08-03-2019

Read original article here

How to set up a local development environment

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.

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

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

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

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

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

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

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. 

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

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

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.

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

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. 

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

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.

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

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

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

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

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

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.

Join us on 26 September forGenerate 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 magazineWeb Designer.Buy issue 287 hereorsubscribe to Web Designer here.

Read the rest of this article here