Hi everybody, my name is Alvaro and in this video
I'm going to show you how to create a web
development environment using Visual Studio code and dev containers.
For this example we are going to use Laravel which
is a PHP framework.
As you can see here there are many ways in
which we can install Laravel,
but we are going to choose Sail because Sail is
a solution they offer for working with containers.
Also Sail supports Dev containers out of the box,
so let's get started by copying this command.
And it's running on the on the console.
And while the command is running,
let's see what is going on here.
So the idea of working with containers and with Sail
is that if you have a PHP application that,
let's say, requires a, MySQL service already service and also
having a full blown PHP installation,
you don't want to be messing with that every time
you start a new project.
So Sail takes care of creating the container for you,
so that is one piece of the puzzle having the
container.
There, which I think is is a great great help,
but Sail is doing. But then also you need to
have an editor and when you start working in a
team with colleagues and you want them to get up
to speed, what's better than offering them?
Hey, let's run this command and when you start Visual
Studio code Vscode will take care of running everything for
you. They don't need to know about containers.
Your colleagues don't need to know about Docker compose and
all those things Visual Studio code will find those files
and run them.
For you. So let's let's wait until this is all installed.
There we finish having our libraries downloaded,
so let's CD into this example app.
So what do we have here?
First, let's list the files we can see.
We have a PHP project there and I can do
less Docker compose.
This is the Docker compose that was created by Sail.
So we see that we have a PHP server there.
We also have MySQL server and Redis and also the
network and volume being set up for us.
Also, if I do here if I go to the
container we also have a dev container installed for us,
so this is ready to go into VS
code. So I can do code.
And open
this folder. And Visual Studio code will start scanning the
project.
And. It detects that this pressure hazard container configuration file
so I can open that inside a container.
Why we want to do this?
Because we want to develop inside the container that has
the PHP installation and let's look at the logs.
And this code will boot this container and also the
MySQL container and the Redis one.
And we'll create all the environment so we can work
right away inside our web application.
Again, we don't need to basically do anything,
just wait for VS code to run all this command
to create the containers because.
Thanks to the to this depth container,
find that we had here.
That is all the information that VSCODE needs for for
start working with this containers.
So, VS Code has finished setting up the environment.
Let's go to localhost. And we see that data is
running there.
And what happens here? Not only is PHP running and
we can get this in in the browser.
VS Code via the dev container took care of doing
the port forwarding,
so the port that are inside a container in localhost
for the container also work from my computer here,
so that's one cool thing that was done for us.
But let's say we don't trust what is going on
and we want to be sure that this is a
PHP running there.
So let's look at this Laravel application.
We have the route and we have the web route
that is showing the welcome template.
This one we see here so.
This actually works because it's showing from the resources views
is showing this welcome view,
but let's change it to see if it's actually where
it's being displayed on the browser.
So let's remove all this code from the body and
I will just type welcome from the container.
So let's have this there.
If I refresh this page now,
we see the code that we just edited.
So here we have a full blown.
In PHP, develop an environment where we can edit the
files and see their changes all directly from inside the
container.
Because VS code knows how to connect remotely into this
container.
Now we need to test if MySQL and Redis are
actually also running there.
Let's start with Redis. So let's take care of let's
take this comment out and let's bring readies into the
game.
So first. We add the class for working with Redis.
And let's do this every time the user goes to
this page.
We want to have a counter and increment that counter.
We are going to store this counter inside Redis as
as an increment. So let's call Redis.
Increment and we will have a key
called view count and let's increment it that by 1.
Then to the template we need to pass some variables
so we can display this information so view count will
be Redis get.
View count. Then we go to the templates and we
are going to add this variable into the template.
So here
I have a paragraph and in this paragraph I will
display
that variable called view count.
So if I refresh here we see that view count
this 1234567 and so on.
So we can see that Redis is also working,
so that is that is pretty cool.
I need to close this tab here,
otherwise everything becomes a title.
This bug is also fixed.
And let's go now to check for MySQL.
To use MySQL we need to bring the database class,
which is the abstraction that Laravel uses for working with
databases.
And in this case we are going to have a.
Because we don't want to populate MySQL for this example,
we want a quick way to see if MySQL is
running and one of the quickest ways is to ask
the server for the version.
So let's create database status variable for the templates.
And this will be database.
Select. And the query will do is select
version() as version
so we asked. We asked the SQL Server for the
server version.
And let's display this on the template.
And we have that. Then MySQL version will be the
database status we get from database.
The 1st result in this the first value from the
result and the version key.
Let's go to the browser and if I refresh we
can see now that we are displaying the server version
that we receive from the database.
So in this quick example.
We can see that by running a command on the
on the command line,
we could get all this development environment setup.
We boot up VS code VS.
Code detected that there was a dev container here and
created all this environment for us.
Then we went to the browser.
We saw that. PHP was running and we were seeing
the welcome page from Laravel.
We went to the routes.
Change the routes and change the template to actually make
sure that we were.
Being greeted by the PHP patient,
it was not some static HTML that I was displaying
in the browser and then we did a query to
increment a count on Redis and display this count on
the template and also to get the database status out of
MySQL and then to show that in the template.
So. But it's so cool about this.
Again, this is about standardizing development environment.
This is about making it easier for our colleagues to
get up and running,
and when we mix the power of containers.
And the power of Visual Studio code via a dev
container.
This simple file here. This file can really boost up
the productivity of our teams and can standardize the way
we work in teams.
So I hope you like this demo about their containers
and expect more in the future.
Thanks.