Laravel on any Developer Machine with Gitpod

In the event you’ve been a developer lengthy sufficient, you’ve got encountered the thrill of cloning a brand new repository solely to be shortly pissed off by not with the ability to get the code to compile or run in your machine. For the longest time I’ve solved this problem through the use of Docker and extra particularly Docker Compose to supply a constant strategy to construct and check code regionally. Whereas not good, it’s an enchancment however remains to be missing in so some ways. However what if there was a strategy to have a constant growth surroundings that additionally permits for standardization and automation. Enter Gitpod, a Cloud Growth Surroundings constructed to unravel simply these issues.

As a PHP and Laravel developer, I typically wrestle with server variations, constant file packaging, database migrations, and operating sources regionally to have the ability to precisely code and check my adjustments. On this article, I’ll stroll by way of a primary setup of tips on how to flip a Laravel repository right into a Gitpod Mission. From that Mission, I am going to spotlight some options of utilizing Gitpod’s Flex to walkthrough native code adjustments and the way any new developer can clone my repository and have a completely working native surroundings by way of the facility of the Gitpod platform.

#Disclosure

However earlier than we start and for disclosure, Gitpod sponsored me to experiment with their product and report my findings. They’ve rented my consideration, however not my opinion. Right here is my unbiased view of my expertise as a developer when establishing a Gitpod Workspace for coding on a PHP and Laravel software

#The Gitpod Downside

I have been a developer for the reason that mid-Nineties and have skilled the entire issues that Gitpod is fixing. Issues like establishing a neighborhood growth, getting a construct, and transport that construct to a server (or cloud). These appear important however there are different challenges past simply the one developer expertise. This under picture is a incredible visible for the area that the tooling is working in.

With the tooling and the issues being established, let’s leap into some code and see how Gitpod and Laravel play along with a neighborhood setup.

#Laravel Utility

For the steadiness of the article, I will be working with a primary Laravel Utility that’s utilizing a SQLite database as its solely exterior dependency. The complete supply code might be present in this Github repository

#Getting Began

Usually once I kick off a Laravel mission, I begin with:

laravel new example-app

Nevertheless, to reap the benefits of Gitpod, I must be constructing in a containerized surroundings. To unravel this, I am leaning into Sail. Sail provides me a strategy to construct my PHP software for a Docker surroundings and gives a generated docker-compose.yml that I can customise to my wants.

All of that is in help of constructing and interacting with my growth surroundings in a DevContainer. DevContainers might be described like this:

A growth container (or dev container for brief) means that you can use a container as a full-featured growth surroundings. It may be used to run an software, to separate instruments, libraries, or runtimes wanted for working with a codebase, and to help in steady integration and testing. Dev containers might be run regionally or remotely, in a personal or public cloud, in a wide range of supporting instruments and editors — DevContainers Web site

In the event you aren’t aware of DevContainers, right here is the web site that may get you up to the mark on why you need to be paying consideration and leveraging them.

Within the context of Gipod, the DevContainer specification is natively built-in and is an integral a part of the developer expertise. For my instance, this is the .devcontainers/devcontainer.json in my mission.

{
    "identify": "Current Docker Compose (Lengthen)",
    "dockerComposeFile": [
        "../docker-compose.yml"
    ],
    "service": "laravel.check",
    "workspaceFolder": "/var/www/html",
    "customizations": {
        "vscode": {
            "extensions": [
            ],
            "settings": {}
        }
    },
    "remoteUser": "sail",
    "postCreateCommand": "chown -R 1000:1000 /var/www/html 2>/dev/null || true"
}

With the mission setup, and the next customizations made, my easy software seems just like the picture under the bullets.

• Added a Todo Mannequin
• Added a Todo Migration
• Added a Todo Seeder
• Custom-made the CSS and UI of the TodoView
• Modified the routes to level / at my TodoController which yields a listing of Todos

#Diving into Gitpod

In the event you communicate to a developer engaged on any software with greater than 2 dependencies, they’re going to have the identical frequent pains that they’ll inform you. Dependency administration on the OS and library stage is usually a ache. Retaining an as much as database that the applying is congruent with takes work. And so they typically overlook to run migrations and miss hours of their life realizing that they wanted to run a migration. Or worse but, they’ve joined a brand new staff and lose many days to simply getting the mission configured.

Now take all of that and the work it takes to do issues regionally, and check out after which convey that effort to the DevOps and Platform staff. It is virtually like beginning over and is usually a fragile dance of translation between native and cloud. Think about with the ability to fulfill each the event staff and the platform staff. That is the issue and area that Gitpod lives in.

My instance under is simply going to scratch the floor. It’s going to make use of PHP, Laravel, DevContainers, Gitpod’s Flex, a neighborhood Gitpod Runner, and a few primary Gitpod Automations. From there, I am going to depart you with some subsequent steps that you may take to speed up your studying.

#Gitpod Tasks and Environments

Gitpod operates round Tasks and Environments. My Mission is linked on to my Github repository that I shared above. Within the UI, that’s represented in a Tasks view.

As soon as I’ve established a Mission, I can then create an Surroundings. Environments can have Runners that are the place your container is hosted. For me, I am operating in a Native Runner, however this might simply be a Area in AWS the place I might get an EC2 server operating in a VPC and Subnet of my selecting.

#Native Runner

As soon as I’ve established these two primary constructs in Gitpod, I am able to launch my native surroundings. That is the place the DevContainer is available in. Gitpod goes to learn that specification which factors again to a Docker Compose file that’s going to launch the container that I can code in.

providers:
    laravel.check:
        construct:
            context: './.devcontainer'
            dockerfile: Dockerfile
            args:
                WWWGROUP: '1000'
        picture: 'sail-8.3/app'
        extra_hosts:
            - 'host.docker.inner:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        surroundings:
            WWWUSER: '1000'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.inner}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on: {  }
networks:
    sail:
        driver: bridge

Once I click on launch, and issues go my method, I get the next picture with all of those inexperienced circles. Crimson circles could be unhealthy, and I might have logs and perception into what may need gone fallacious.

#Automations

At this level, you is likely to be questioning what these Companies and Duties are within the mid to backside a part of the picture. Gitpod goes past simply DevContainers and offers you the flexibility to customise the best way issues launch. Automations are highly effective and extra might be learn right here.

Primarily, consider them like this. I get factors within the launch the place I can run instructions towards my container. For example, perhaps I wish to run a DB Migration. Or maybe I wish to compose some dependencies for my Laravel software? These could be known as Duties.

However what about lengthy operating issues just like the PHP software itself? These could be accomplished through Companies. And all of this automation occurs by together with a .gitpod/automations.yaml file in my mission. In my case, it seems just like the under. I opted for granularity vs doing them multi function Activity simply to visualise issues higher.

providers:
  php:
    identify: Run PHP Serve
    triggeredBy: ["postDevcontainerStart"]
    instructions:
      begin: php artisan serve
 
duties:
  copyEnv:
    identify: Copy Surroundings
    description: Creates the .env file
    triggeredBy:
      - postEnvironmentStart
    command: cp .env.instance .env
  appUrl:
    identify: Mod App URL
    dependsOn: ["copyEnv"]
    triggeredBy:
      - postEnvironmentStart
    command: sed -i "s#APP_URL=http://localhost#APP_URL=$(gp url 8000)#g" .env
  viteUrl:
    identify: Mod Vite URL
    dependsOn: ["copyEnv"]
    triggeredBy:
      - postEnvironmentStart
    command: sed -i "s#GITPOD_VITE_URL=#GITPOD_VITE_URL=$(gp url 5173)#g" .env
  composer:
    identify: Set up Dependencies
    dependsOn: ["copyEnv"]
    triggeredBy:
      - postEnvironmentStart
    description: Installs deps through composer
    command: composer set up --ignore-platform-reqs
  createDatabase:
    identify: Create Database
    triggeredBy:
      - postEnvironmentStart
    dependsOn: ["copyEnv"]
    command: contact database/database.sqlite
  phpOperations:
    identify: Setup PHP and Run
    triggeredBy:
      - postEnvironmentStart
    dependsOn: ["copyEnv"]
    command: |
      php artisan key:generate
      php artisan storage:hyperlink
      php artisan migrate --seed
      php artisan db:seed --class=TodoSeeder

Superb proper?!? I can have these steps run once I launch my growth surroundings. And any developer who has entry to this mission will get the identical. And as an instance that I would like to vary steps or workflow, the following time I launch. These simply get run. So a lot better than a README.md file that would possibly be outdated.

#Connecting to My Editor

When utilizing the Gitpod Consumer, I can then join my editor or a Terminal to my container. For this, I opted for VSCode due to its recognition. Nevertheless, there’s an integration for Jetbrains IDEs and I can also join my favourite editor in Neovim through customized Dotfiles. The terminal developer in me is inspired by this help and I plan to do some deeper dives on this space as I get time.

VSCode has two good extensions for working with Gitpod and DevContainers. I discovered that when I launched my Gitpod Surroundings in VSCode, it was identical to working with regular native growth. Adjustments can be found instantly and the entire regular Git operations carry out simply as I anticipated. And once more, all of that is occurring in a Container, so no worrying about native dependencies or “it really works on my machine”.

The final piece of the puzzle is to guarantee that I’ve acquired ports uncovered to my container in order that I can serve the site visitors from the operating Gitpod Service which is simply php artisan serve. As soon as the whole lot is in place, I will serve the site visitors in my browser that exhibits a PHP Laravel Utility, backed by SQLite that was migrated and seeded as my Activity automations specified.

And the nice factor is, I can share this with any teammate, and within the time it takes to drag the Gitpod and DevContainer sources, initialize, and launch, they’re going to have the identical expertise. There are simply so many issues solved.

#Impressions and Ideas

I hadn’t spent a ton of time with CDEs previously however I am very impressed with what Gitpod is placing collectively. I believe that the facility lies in its repeatability and the flexibility to automate so many routine duties in a constant method that’s not runtime particular is simply magic.

I did not get an opportunity on this article to discover operating a Mission within the Cloud, however from my exploration of the documentation, I can join this similar mission to AWS through a generated CloudFormation template. And since Gitpod comes with a CLI, that very same work I do regionally, might be linked to an automatic pipeline as a part of a CI/CD course of that may speed up transport worth to prospects.

I did have a few bumps alongside the best way although. Gitpod only in the near past rolled out their Flex product which is what this text relies upon.

First, the documentation is sweet, however the tutorials left slightly to be desired so I did have some determining of particular patterns and the way the Consumer UI labored. Hopefully this text and the accompanying code saves you from a few of these.

Second, the UI is superb for an early launch however there are nonetheless some choices missing like refreshing my Git repository if I modified one thing basic. And I discovered that when dropping to the brand new CLI, I wasn’t capable of carry out issues that I believed I might from the documentation.

The bumps nonetheless are completely offset by the truth that the software program works amazingly. And pair that with an lively growth cycle by Gitpod’s Github repositories and issues will solely get higher as Flex continues to take off. I’m significantly impressed by the workflow and the time financial savings that this might present a bigger software program growth staff.

#Wrapping Up

My purpose with this piece was to supply a primary introduction to operating a Laravel Utility developed in Gitpod with DevContainers and the Flex UI Consumer. There’s a lot extra to the ecosystem that’s price exploring. You might dive extra into Gitpod, the DevContainers specification, or enhance the bottom Dockerfiles that I am working with on this mission.

What I consider is highly effective concerning the CDE method is that as a developer, you may higher associate along with your Platform groups to share a few of the burden of deployment and provisioning through the use of the abstractions that Gitpod gives. You additionally achieve a excessive stage of isolation and safety by taking this method. Environments might be remoted to workstations or servers. You can even make use of tenant stage configurations. And lastly, each operation that you simply execute is vetted by credentials and authorizations throughout the Gitpod API.

Growth is shifting quick. This method provides you the management and luxury that the foundations beneath your day-to-day are managed, managed, and guarded.

Thanks for studying and pleased constructing!