loading...
Cover image for Chromebook Dev Setup

Chromebook Dev Setup

iamdesigniso profile image Orion F. ・3 min read

Greetings All!

I only had a few dollars to my name and needed a new laptop. That's when I purchased an Acer Chromebook 15. The cost was only $150 + tax! Once I received it, I went right away trying to download developer tools such as code editor, fonts and etc. When trying to do so I felt disappointed because many things to begin my front end development journey weren't able to be done on Chrome OS. I searched high and low on how to setup the Chromebook for development finally setting it up. After doing all the searching gathering the tools, I decided that it was time for me to give the full setup of the Chromebook Dev. I won't get lengthy with the notes following and will try to be as precise as I can be.

Let me add as well that this may void your warranty on your Chromebook. If your like me, I didn't care. LOL! I just needed to get to the creating projects!

Also I might add that these steps worked for myself many times. There are many ways to this solution, but I wanted to share my own.


SECTION 1: Enable Developer Mode

Enabling Developer Mode: When placing your Chromebook in developer mode, you are getting full access to the 'root' of the computer system files. I mean you are striving to be a "developer" right?!

Steps:
- Turn OFF Chromebook if powered ON.
- Press and hold esc + refresh, then press the power button.
- Wait for the screen that says " Chrome OS is missing or damaged...."
- Press Ctrl + D
- If prompted, press Enter
- Wait for the device to reboot.

  • When enabling developer mode you will be prompted this message each time you turn on the Chromebook so don't be alarmed. Just press Ctrl + D to proceed to login or desktop.

SECTION 2: Turn on Linux

Turning on Linux will allow you to download Linux software to your Chromebook. This is the step that will allow you to install items such as code editors, apps outside of android and more.

Steps:
- Click on settings
- Click the hamburger icon in the upper-left corner
- Click on Linux (Beta) in the menu.
- Click Turn On
- Click Install
- The Chromebook will download the files it needs.... (May take a moment or two so be patient)
- Click the Terminal icon.
- Type the following in the command window: sudo apt update
- It will update the Chromebook files (May take a moment)
- Close terminal window (It may ask if you're sure. Click "yes" to proceed)

Alright. So we now have the Chromebook setup for Developer Mode and Linux is installed. Now we shall proceed with Nodejs and NPM.


SECTION 3: Installing NodeJS and NPM

Many developers heard of the terms Nodejs and NPM yet don't understand fully what they mean or what they do. Well good thing I am here!

Nodejs- is a JavaScript runtime built on Chrome's V8 JavaScript engine. (Soo.... what does that mean Orion?!)

**Nodejs came about when the original developer of JS extended it from something you could run in the browser to something you could run on your machine as a standalone application.

NPM- Node Package Manager - is a package manager for JS. It's the default package manager for the JS runtime environment.

**Most commonly, it is used to publish, discover, install and develop node programs.

Steps:
- Open terminal and run: sudo apt-get update
- Update will proceed.
- Install: curl and gnupg: sudo apt-get install curl gnupg -y
- Install Nodejs: curl -sl https://debv.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs
- Close terminal once installation is complete.


SECTION 4: Installing Visual Studio Code (VSCODE)

VSCODE has to be the largest (if not most popular) text editor within the industry hands down. The productivity, feel and many features packed within allows you to go beyond measures within web development. There are others out there such as Sublime, ATOM, etc. I will show only how to install VSCODE.

Steps:

  • Go to VS Code website : code.visualstudio.com
  • Download The latest version of VSCode
  • Open your files and locate the program in the downloads folder.
  • Drag the file within your Linux files folder located on the right panel.
  • Once program transfers to the Linux files folder, delete the file from the downloads folder (This will eliminate duplicate software)
  • Click on the Linux files folder to open then double click on the VSCode program.
  • VSCODE will install showing indicator of installment in the bottom right corner.
  • Open VSCODE from your app menu

CONGRATS you have completed your Chromebook Developer Setup. Hope you enjoyed!

Discussion

pic
Editor guide
Collapse
bradtaniguchi profile image
Brad

How was the performance of VSCode running a web development stack? I tried this approach a few years ago and found the experience to be a little to slow for my liking.

Wondering if you had a better/different experience :)