EMILIE ROBERTS: Hi.
I'm Emilie Roberts, a developer
advocate with Chrome OS
developer relations.
Today, I'm going to talk about
web development on Chromebooks.
Here is a quote from you,
a skilled web developer.
"Chromebooks are awesome."
And if you don't remember
saying this recently,
I hope that after
watching this video,
it will become a daily thing.
Chromebooks are known for being
lightweight, fast, secure web
browsing machines.
They are so much more.
The device portfolio has
grown to include tablets,
detachables, all-in-one,
mini desktops,
and of course, laptops
and convertibles.
Many of these are capable
development devices.
So what can you run on them?
Well, IDEs like Visual
Studio Code, Atom, WebStorm,
tools like Node,
React, Docker, and Git,
and you can test your web
apps with multiple browsers,
including real mobile browsers.
As well, you can check how
your mobile app interacts
with your web server, all
right on the same device.
OK.
Let's get started and
get your Chrome OS
device ready for development.
We are going to set
up a Linux environment
and then install
the tools you need.
To start, open Chrome
settings and search
or scroll down to Linux.
Click Turn on.
This will download and
setup a Linux environment.
When it's complete, you'll
see a terminal prompt.
Pro tip-- if you will be
doing a lot of development,
pin the Terminal by
right-clicking and choosing
Pin.
Now we have a Linux environment.
Let's install some tools.
Head over to the Visual
Studio Code website
and download the
Linux.deb package.
Double-click and choose Install.
Once it's installed,
you can find
VS Code in your App Launcher.
If you're going to be
using this IDE a lot,
you can pin it like we
did with the Terminal.
Any application with a .deb
package can be installed
in a similar way.
Let's install Atom.
The process is
exactly the same--
download, install, and launch.
Not every app has
a .deb package,
but you can install any of your
favorite tools that support
Debian Linux.
For example, to
install Sublime Text,
follow the Linux
instructions on the website
to set up the APT repo and
install the editor using
the command line.
When we install Node
in a few seconds,
we'll take a closer look at
command line installation.
And the same thing goes
for apps like WebStorm.
Just go to the website,
follow the Linux download
and install instructions.
I won't do WebStorm right now.
Let's get right on to the
server side of things.
Oh, and by the way, at
the end of this video,
I will direct you to a page
by the Chrome OS DevRel
team with installation
instructions for all the apps
and more discussed
in this video.
Now, beyond what I mention
today in this video,
if your favorite tool
is supported in Linux,
it should run on Chromebooks.
For example, I like
gedit for text editing,
FileZilla as an FTP client, and
Inkscape for vector graphics
editing.
Today, web development
usually takes more
than a text editor, an
IDE, or an FTP client.
Let's get to some
other tools so we can
make some really nice web apps.
Node.js requires gnupg2.
Open up your Terminal
and install it with apt.
That command is sudo
apt install gnupg2.
If you're new to
apt, you can probably
guess that by replacing gnupg2
with whatever package name
you want, it will
install that package.
Now, finding the
right package name
can sometimes be
the tricky part.
Note, as we continue with
this video and other terminal
commands, I won't read
every line out loud.
But as mentioned, I
will provide a link
at the end that has them all.
Now that the dependency is
installed, let's get Node.js.
Run this cURL command followed
by another apt install command
for node.
That's it.
Node.js is ready to go.
Don't believe me?
Well, let's try
it out with PROXX.
Use git to clone the PROXX
repo and NPM to install, build,
and serve the PROXX web app.
Navigate to localhost:8080 in
your web browser and check it
out.
Pretty cool.
So much minesweeping to be done.
Let's try React.
Using NPM, you can
install, create-react-app,
then use create-react-app to
create a skeleton project.
Here, I call it
hello-world-react.
Navigate into the directory
where it was created
and call npm start.
Now, navigate to localhost:3000
in your browser and check it
out.
If you prefer Angular,
install that, too.
The steps are almost the same.
Again, we use NPM to
install @angular/cli.
Create an Angular app using
ng new my-angular-project.
Change directories
into the project
folder using cd, for change
directory, my-angular-project.
Now, in gServ, browse to
localhost:4200 and check it
out.
Here, you'll notice that
I have PROXX, a React
app, and an Angular app all
running on different ports
all on the same Chromebook.
I think this is pretty handy.
What's more, this
is all local, so
as long as your tools
are already installed,
you could do all of your
development offline--
say, like on a plane.
What about Docker?
No problem.
Again, we're going to follow
the normal Linux installation
steps.
First, we double-check that all
the dependencies are installed.
We add the Docker
repository to apt,
and then we update the apt
package list since we just
added a new repository.
We use sudo apt
update to do this.
Then install Docker.
Test it out by
running hello-world.
This is done with sudo
docker run hello-world.
You should get a
nice message showing
that everything is working.
Let's do something
a little bit more
advanced by running an Ubuntu
Linux container in Docker.
sudo docker run -it ubuntu bash.
And there you go.
Your output is going to
look something like this.
In the Ubuntu container, I've
taken a look at the OS version
with cat /etc/os-version and
you can see, it's really Ubuntu.
Now, once an app is ready to
deploy, it should be tested.
Because Chromebooks have
web, Android, and Linux,
you can test across multiple
browsers on multiple platforms
all right on the same device.
Let's install a whole pile of
browsers to prove this point.
Using the Terminal and apt,
install Firefox for Linux.
Note in Debian, the package
name is firefox-esr.
Then let's also install the
Chromium browser for Linux.
Feeling brave?
Let's install the Brave
browser for Linux.
I won't walk through all
of these lines right now,
but again, they are just
the standard installation
instructions for Debian Linux.
We install the GPG key, we
install the repo, and finally
Brave.
Now, if four browsers aren't
enough, let's add a few more.
Head over to the
Google Play Store
and install some
Android browsers.
Let's go with Firefox for
Android, Opera for Android,
and Chrome Beta for Android.
We now have seven
browsers installed,
which can give us a reasonable
first attempt at test coverage.
We have the Chrome
OS Chrome browser,
three Android browsers--
that is Firefox, Chrome Beta,
and Opera--
three Linux browsers-- Firefox
for Linux, Brave, and Chromium.
And here you can see
that our PROXX web
app is running on all seven.
One last thing to mention.
In case you have a mobile app
that interacts with your web
service, you can do
Android, TWA, and Flutter
development on Chrome
OS devices, which
means you can build and
package your mobile app
on your Chromebook, test it
right on the device you are
coding on, like any
other Android app,
build your web component,
start your web server,
and then test everything
on multiple browsers
and see how it interacts
right on the device.
Android Studio is
as easy to install
as Visual Studio Code or Atom.
Head over to the Android Studio
site and download the .deb
file.
Then, you can code
your app like you'd
expect in Android Studio
with one cool difference.
You'll notice that you can
push directly to the Chromebook
you're working on.
Pretty cool.
Full instructions on
how to set this up
can be found on the link
at the end of this video
on the Android page.
So with your Chromebook,
you can build web apps
with the tools you
are used to, develop
and test right on device with
tools like Node.js, Docker,
and Angular, test across
multiple browsers,
including mobile browsers, and
even test mobile app and web
interaction right on device.
And all of this could
even happen offline,
like on a long flight.
So now, don't you agree
Chromebooks are awesome?
As promised, here
is a link to a guide
to get your Linux
environment customized
just the way you like.
It's cros.page.link/web-dev.
Thank you.
Can't wait to see
what you build.
[MUSIC PLAYING]
