Web development on Chrome OS (Chrome Dev Summit 2019)
Web development on Chrome OS (Chrome Dev Summit 2019)
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!
Presented by: Emilie Roberts
#ChromeDevSummit All Sessions → https://goo.gle/CDS19
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
Event photos → https://goo.gle/CDS19Photos
event: Chrome Dev Summit 2019; re_ty: Publish; product: Chrome - Chrome OS; fullname: Emilie Roberts;
Content
0 -> hi I'm Emily Roberts a developer
2.639 -> advocate with Chrome OS developer
4.319 -> relations today I'm gonna talk about web
6.93 -> development on Chromebooks here is a
9.03 -> quote from you a skilled web developer
12.049 -> Chromebooks are awesome and if you don't
16.049 -> remember saying this recently I hope
18.029 -> that after watching this video it will
19.8 -> become a daily thing Chromebooks are
22.439 -> known for being lightweight fast secure
25.14 -> web browsing machines they are so much
27.51 -> more the device portfolio has grown to
30 -> include tablets detachable z' all-in-one
32.64 -> mini desktops and of course laptops and
35.61 -> convertibles many of these are capable
37.89 -> development devices so what can you run
41.76 -> on them
42.239 -> well ideas like visual studio code Atom
46.25 -> webstorm tools like node react docker
50.07 -> and get and you can test your web apps
52.89 -> with multiple browsers including real
54.989 -> mobile browsers as well you can check
57.78 -> how your mobile app interacts with your
59.579 -> web server all right on the same device
62.359 -> okay let's get started and get your
64.769 -> Chrome OS device ready for development
66.86 -> we are going to set up a Linux
69.09 -> environment and then install the tools
71.04 -> you need to start open Chrome settings
73.83 -> and search or scroll down to Linux click
77.58 -> turn on this will download and setup a
81.119 -> Linux environment when it's complete
83.009 -> you'll see a terminal prompt pro tip if
86.1 -> you will be doing a lot of development
87.78 -> pin the terminal by right-clicking and
90.689 -> choosing pin now we have a Linux
94.5 -> environment let's install some tools
96.71 -> head over to the visual studio code
99.27 -> website and download the Linux dot de
102.479 -> Bie package double click and choose
105.27 -> install once it's installed you can find
108.299 -> vs code in your app launcher if you're
110.64 -> going to be using this IDE a lot you can
113.07 -> pin it like we did with the terminal
119.619 -> any application with a dot de Bie
122.9 -> package can be installed in a similar
125.09 -> way let's install atom the process is
128.66 -> exactly the same download install and
135.05 -> launch not every app has a dot de Bie
139.88 -> package but you can install any of your
142.069 -> favorite tools that support Debian Linux
143.62 -> for example to install sublime text
146.66 -> follow the Linux instructions on the
148.79 -> website to setup the apt repo and
151.31 -> install the editor using the
152.87 -> command-line when we install node in a
156.89 -> few seconds we'll take a closer look at
158.9 -> command-line installation and the same
161.42 -> thing goes for apps like webstorm just
164.209 -> go to the website follow the Linux
166.01 -> download and install instructions I
167.84 -> won't do a web storm right now let's get
170.51 -> right on to the server side of things oh
172.42 -> and by the way at the end of this video
175.43 -> I will direct you to a page by the
177.05 -> Chrome OS Deverell team with
178.85 -> installation instructions for all the
180.62 -> apps and more discussed in this video
183.4 -> now beyond what I mentioned today in
185.81 -> this video if your favorite tool is
187.31 -> supported in Linux it should run on
189.26 -> Chromebooks for example I like G edit
192.079 -> for text editing FileZilla as an FTP
195.17 -> client and Inkscape for vector graphics
197.69 -> editing today web development usually
200.84 -> takes more than a text editor an IDE or
203.239 -> an FTP client let's get to some other
206.06 -> tools so we can make some really nice
207.859 -> web apps nodejs requires GnuPG to open
213.59 -> up your terminal and install it with apt
216.459 -> that command is sudo apt install GnuPG 2
222.29 -> if you're new to apt you can probably
225.56 -> guess that by replacing GnuPG 2 with
229.07 -> whatever package name you want it will
231.38 -> install that package now finding the
233.78 -> right package name can sometimes be the
235.31 -> tricky part note as we continue with
238.22 -> this video and other terminal commands I
240.65 -> won't read every line out loud but as
242.87 -> mentioned I will provide a link at the
244.28 -> end that has them all
246.61 -> now that the dependency is installed
248.9 -> let's get nodejs run this curl command
253.12 -> followed by another apt install command
255.95 -> for node that's it
258.65 -> no js' is ready to go don't believe me
261.92 -> well let's try it out with procs use git
265.43 -> to clone the procs repo an NPM to
268.55 -> install build and serve the proxy web
270.59 -> app navigate to localhost 8080 in your
275.24 -> web browser and check it out pretty cool
278.66 -> so much minesweeping to be done
281.15 -> let's try react using NPM you can
285.05 -> install create react app then use create
289.13 -> react app to create a skeleton project
291.44 -> here I call it hello world react
295.12 -> navigate into the directory where it was
297.29 -> created and call NPM start now navigate
303.47 -> to localhost 3000 in your browser and
305.54 -> check it out if you prefer angular
309.41 -> install that too the steps are almost
312.14 -> the same again we use NPM to install at
315.88 -> angular slash CLI create an angular app
320.63 -> using ng new my angular project change
324.44 -> directories into the project folder
326.2 -> using CD for change directory my angular
329.96 -> project now ng serve browse to localhost
334.03 -> 4200 and check it out here you'll notice
337.73 -> that I have procs a react app and an
340.82 -> angular app all running on different
342.65 -> ports all on the same Chromebook I think
345.62 -> this is pretty handy what's more this is
348.2 -> all local so as long as your tools are
350.6 -> already installed you could do all of
352.49 -> your development offline say like on a
355.19 -> plane what about docker no problem again
359.54 -> we're going to follow the normal Linux
361.28 -> installation steps first we double check
364.01 -> that all the dependencies are installed
365.48 -> we add the docker repository to apt and
368.57 -> then we update the apt package list
371.21 -> since we just added a new repository we
374.27 -> use sudo apt update to do this then
377.84 -> install docker test it out by running
380.87 -> hello world this is done with sudo
383.18 -> docker run hello world you should get a
385.52 -> nice mess
386.24 -> showing that everything is working let's
388.009 -> do something a little bit more advanced
389.69 -> by running an Ubuntu Linux container and
392.509 -> docker
392.96 -> sudo docker run - it Ubuntu bash and
396.56 -> there you go your output is gonna look
398.72 -> something like this
399.65 -> in the Ubuntu container I've taken a
401.75 -> look at the OS version with cat slash et
405.02 -> Cie / OS version and you can see it's
408.41 -> really Ubuntu now once an app is ready
411.74 -> to deploy it should be tested because
414.59 -> Chromebooks have web Android and Linux
417.139 -> you can test across multiple browsers on
419.69 -> multiple platforms alright on the same
422.09 -> device let's install a whole pile of
424.759 -> browsers to prove this point using the
427.94 -> terminal in apt you install Firefox for
431.09 -> Linux note in debian the package name is
434.509 -> Firefox - ESR then let's also install
439.4 -> the chromium browser for Linux feeling
442.49 -> brave let's install the brave browser
444.71 -> for Linux I won't walk through all of
447.02 -> these lines right now but again they are
449.18 -> just the standard installation
450.289 -> instructions for Debian Linux we install
453.86 -> the GPG key we install the repo and
457.12 -> finally brave now if for browsers aren't
462.02 -> enough let's add a few more head over to
465.919 -> the Google Play Store and install some
467.9 -> Android browsers let's go with Firefox
471.11 -> for Android opera for Android and Chrome
474.32 -> Beta for Android we now have seven
476.99 -> browsers installed which can give us a
479.479 -> reasonable first attempt at test
481.13 -> coverage we have the Chrome OS Chrome
485.06 -> browser three Android browsers that is
488.99 -> Firefox Chrome Beta and opera three
493.039 -> Linux browsers Firefox for Linux brave
495.979 -> and chromium and here you can see that
499.699 -> our procs web app is running on all
501.59 -> seven one last thing to mention in case
504.62 -> you have a mobile app that interacts
506.509 -> with your web service you can do Android
509.15 -> TBWA and flutter development on Chrome
511.789 -> OS devices which means you can build and
514.19 -> package your mobile app on your
515.39 -> Chromebook test it right on the device
517.52 -> you were coding on like any other
519.199 -> Android app
519.979 -> build your web component start your web
522.769 -> server and then test everything on
525.05 -> multiple browsers and see how it
526.82 -> interacts right on the device Android
530.81 -> studio is as easy to install as visual
533.029 -> studio code or atom head over to the
535.16 -> Android studio site and download the dot
537.38 -> de Bie file then you can code your app
541.19 -> like you'd expect an Android studio with
543.199 -> one cool difference you'll notice that
546.44 -> you can push directly to the Chromebook
548.69 -> you're working on pretty cool full
551.48 -> instructions on how to set this up can
553.519 -> be found on the link at the end of this
555.079 -> video on the android page so with your
559.55 -> chromebook you can build web apps with
561.079 -> the tools you are used to develop and
563.209 -> test right on device with tools like
564.85 -> nodejs
566 -> docker and angular tests across multiple
569.06 -> browsers including mobile browsers and
571.339 -> even test mobile app and web interaction
574.94 -> right on device and all of this could
577.699 -> even happen offline like on a long
579.709 -> flight so now don't you agree
583.37 -> Chromebooks are awesome as promised here
587.93 -> is a link to a guide to get your Linux
589.459 -> environment customized just the way you
591.319 -> like it's cross dot page dot link slash
595.94 -> web - dev thank you can't wait to see
600.199 -> what you build
601.36 -> [Music]
Source: https://www.youtube.com/watch?v=3CWUAisN-vo