Using Lando to set up your local development environment

Lando with WordPress using Bedrock from scratch

Important note:

There’s an existing issue on Github where Lando conflicts with Bedrock’s use of a .env file. You can read details of the issue here: WordPress: Doesn’t work with Bedrock framework · Issue #499. There are a couple of workarounds proposed including removing DB variable entries and WordPress hash keys in the .env file, none of which worked for me on my tests (see issues encountered below). There’s even a fork made of Lando specifically for addressing these bedrock issues but installing a forked version for general local development setup is a far from ideal solution.

The only working solution I found so far, without resorting to installing a forked version of Lando, is the one suggested last in the Github thread, where you put the whole bedrock project in its own directory inside a Lando project folder. This setup is the one outlined below.

Installation

Every OS has its own requirements to follow for Lando to be able to work on your local so before adding Lando on your local environment setup, make sure you have a good read of the system requirements specified here.

• For MacOS users
• For Linux users
• For Windows users

The links above already have the Docker setup included (feel free to uncheck it if you would like to set it up on your own)

• Install from the source – follow this installation if you already have Docker, Yarn, and Node,js

Setup (Lando + WordPres + Bedrock)

Assuming you have completed the installation and you now have Docker and Lando on your local, you may now proceed in creating your very first Lando project by following these steps:

1. Create a new project directory

Create a folder for your project

$ mkdir <appname>
$ cd <appname>

Note: Your Lando project folder can be stored anywhere.

2. Initialize Lando

Initialize Lando in the root of your newly created project folder

$ lando init

After doing so, it will prompt you to “get started cooking” by giving you the options to set up your project based on your needs. Read each option and then enter your choice to proceed.

• From where should we get your app’s codebase? Current working directory – Choose from different sources to specify where to get your app’s codebase
• What recipe do you want to use? WordPress – Lando has different platforms that can be selected depending on your project. Use the arrow down button to select a platform then enter
• Where is your webroot relative to the init destination? app/web – (Please read the important note above) Specify where Lando will  insert the project files in our project folder
• What do you want to call this app? offshorly-lando – Give your project a unique name

After setting up your project, it must look like this:

and should create a .lando.yml file in your project’s root folder

3. Use lando’s built in composer command and install Bedrock inside a new app directory

$ lando composer create-project roots/bedrock app

The above command installs bedrock in an app folder inside the newly-created project directory. The main project directory is where you run Lando commands to manage the app without Lando conflicting or interfering with bedrock’s .env settings.

If you already have composer installed on your system then you can just run

$ composer create-project roots/bedrock app

4. Edit Bedrock’s .env file inside the app directory

See the project details by typing the command lando info and do of the following changes in the .env file: (use the image below for reference)

• Set DB_NAME, DB_USER, and DB_PASSWORD according to what is in lando info – red line
• Uncomment (if commented out) DB_HOST and set value to ‘database’.
• Change WP_HOME variable to local app URL (e.g., http://appname.lndo.site) – yellow line
• Generate your keys from here
• Save your .env file

The new .env file should look like this:

5. Start Lando

$ lando start

Once the project is started, you can access it using the links generated after the command lando start.

NOTE: If the app’s URLs are showing up in red or when clicked and shows a 404 error that means that Lando cannot detect a WordPress installation running in the defined web root (app/web), you may need to run lando rebuild to fix this.

Note: There might be an instance when you try to access the https links of your site it results to 404 or an error. Please check this page for more info.

6. After lando start, the WordPress installation will be seen

Set up Sage 9 starter theme

Sage 9 has the following dependencies:

• WordPress >= 4.7
• PHP >= 7.1.3 (with php-mbstring enabled)
• Composer
• Node.js >= 8.0.0
• Yarn

1. Change PHP version

The PHP version included in the current Lando WordPress recipe is 7.1.26. To meet Sage’s requirement we need to upgrade to 7.2 by adding the following line to the .lando.yml file, under config settings and then run lando rebuild to apply the change.

Composer is already included in Lando’s WordPress recipe so that’s already taken care of. Sage’s documentation advises against running yarn in a docker environment so both node and yarn needs to be installed in the host machine instead.

2. Install Sage in the theme directory.

$ cd app/web/app/themes

$ lando composer create-project roots/sage themename

Where themename is your theme’s name. Once Composer is finished installing your theme’s files, it will prompt you to supply the theme details. An example is provided at the right which will help you figure out what to include. The details in here will be shown when the theme is clicked in Appearance in WordPress.

After specifying the details, use the command below to build your theme’s files:

$ yarn && yarn build

Note: Check if devUrl in resources/assets/config.json is correct and update if necessary to reflect your local development site’s URL. Head on to your project and activate the created Sage 9 starter theme. Also, refer to the Sage 9 documentation for additional theme configuration and development guide.