This talk demonstrates how in a few clicks you can get a full web development environment up and running on Chrome OS, including how to do cross-browser testing! 🙂
Transcript
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.
Leave a Reply