Develop Your First Web App with Lando — Beginner Guide

Lando is becoming a popular local development environment. It is a cross-platform, free, and open-source tool built upon Docker container technology. Let’s see how fast we can start with Lando.

Ready to build your first web application? 💻

I’ll walk you through building a simple web app on Lando and illustrate its basic functionalities. But before we start, let’s check if your system meets the requirements mentioned in the official Lando documentation.

System Requirements:

Refer to Lando’s official documentation for detailed specifications: https://docs.lando.dev/getting-started/requirements.html#system-requirements

Done, Now let’s start!

Step 1: Installation

To install Lando, It is truly simple. You just have to paste a single line in your terminal or cmd.

For Mac/Linux users:

/bin/bash -c "$(curl -fsSL https://get.lando.dev/setup-lando.sh)"

For Window’s users:

iex (irm 'https://get.lando.dev/setup-lando.ps1' -UseB)

Step 2: Building a Simple Webpage

Create a directory called “hello” and navigate into it. You can do that using the following command:

mkdir hello && cd hello

The next step is to generate a html file.

echo "<h1>Hellooo what have we here?</h1>" > index.html

You can manually follow the above steps instead of using a terminal.

Step 3: Initializing Lando

In order to initialize Lando with basic settings, we have to run the following command in our terminal:

lando init --sourcecwd --recipe lamp --webroot . --name hello-lando

You can see that our application name will be `hello-lando`, the webroot path will be the current directory, and the recipe is Lamp. Let’s fire up the development server.

Step 4: Start the Development Server

To launch the local server, run the following command in the terminal:

lando start

This command might take a long time to complete, so you can take a break in-between.

Step 5: Accessing Your App

Once your command is completed, you will get a link to your newly created web app. CTRL + Click on the link http://hello-lando.lndo.site/ to access your app in your default browser.

Ctrl + Click to open your app

App

Step 6: Exploring the Database and Other Details

To know more about your application, you can use some commands that are provided by Lando. To see all of the commands that are provided by Lando, you can type lando in the terminal.

lando 

Lando Command

To access credentials for your database, you can use lando infocommand.

lando info

Lando info

If you scroll a bit, you can find the details for your database. You can see our database host is database , user lamp , password lamp and database lamp.

Let’s create a table. But how can we access our database. Lando can help you with that too.

lando mysql 

mysql shell

Step 7: Creating a Database Table

Use the following commands to create a “users” table:

SHOW DATABASES;
USE lamp;
CREATE TABLE users (id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL);

Create Users Table

Step 8: Populating the Database

Let’s add a few records to our newly created table.

DESCRIBE users;
INSERT INTO users (name, email) VALUES ("Shishir Kumar", "sky@test.com"), ("Akash Kumar", "akash@test.com"), ("John Doe", "joh@test.com");

Create a new file inside your app directory hello. Give it users.php name.

In this file, let’s create a database connection, fetch the data from our database, and display it in a table.

<?php

// Credentials
$server = "database";
$database = "lamp";
$user = "lamp";
$password = "lamp";

// Data source name string
$dsn = "mysql:host={$server};dbname={$database}";

try {
    $conn = new PDO($dsn, $user, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    echo "Hurray! Connected to the database!"; // Comment it later
} catch (PDOException $e) {
    echo "Oops! Connection failed to established: " . $e->getMessage();
}

// Let's fetch users
$sql = "SELECT * FROM users";
$statement = $conn->prepare($sql);
$statement->execute();
$users = $statement->fetchAll(PDO::FETCH_ASSOC);
// var_dump($users);

?>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
    padding: 10px;
}
</style>
</head>
<body>
<table>
    <thead>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
    </thead>
    <tbody>
        <?php foreach($users as $user): ?>
        <tr>
            <td><?= $user['id'] ?></td>
            <td><?= $user['name'] ?></td>
            <td><?= $user['email'] ?></td>
        </tr>
        <?php endforeach;  ?>
    </tbody>
</table>
</body>
</html>

Step 9: Viewing the Results

To view the result, open your browser and navigate to http://hello-lando.lndo.site/users.php to see the list of users.

users

Congratulations! 🎉 You’ve successfully built your first web application using Lando!

Bonus Tips

You can create info.php file to check everything about your PHP, such as enabled extensions, execution time, etc.

echo "<?php phpinfo(); " > info.php

You can override different settings, such as the PHP version and MySql version of your development server, by adding properties inside config section in the .lando.yml file, also create another file: .local.lando.yml to override settings just for your computer. You have to add this file to .gitignore so that other team members can’t access it.

.lando.yml