If you just received a new Pixelbook, congratulations! Hopefully you have had some fun with Infinite Painter and possibly some other Android apps from Google Play.

Note: I wrote a separate, detailed post about my initial Pixelbook Developer experience.

Now let’s get down to the business of getting your machine ready for some Angular development!

Get updated

First, make sure you update to the latest patch by checking for an update in your status bar (click the clock). Select the option to reboot and install the update if one exists. Ideally you are on Chrome OS 70 or later.

You can check your Chrome OS version in Settings->Hamburger menu->About Chrome OS.

Enable Linux Apps (beta)

Go to the Support Page for Linux Apps and follow the instructions. In my case, there were some upgrades available from apt-get.

Install Java

From your Linux terminal:

sudo apt install openjdk-8-jdk

Install WebStorm

Go to the JetBrains WebStorm Download page and click the Download button.

In your Linux terminal, create a downloads folder:

mkdir ~/downloads

Open the Files app. Copy your download from My files->Downloads to Linux files->downloads via drag and drop.

In your Linux Terminal, extract the WebStorm archive into /opt:

sudo tar xf ~/downloads/WebStorm-2018.3.tar.gz -C /opt

In your Linux Terminal, launch WebStorm:

/opt/WebStorm-183.4284.130/bin/webstorm.sh

Note that your path to the WebStorm directory will be slightly different per version.

Go through the setup steps and make sure the box to create a Desktop Entry is checked (default) but don’t check the box for All Users. Complete the wizard, give WebStorm a minute to settle, and then close it.

Launch WebStorm from the Chrome OS Launcher

That last step made WebStorm available in the Linux apps directory of the Chrome OS Launcher.

Launch WebStorm from the Chrome OS Launcher and repeat the setup steps other than creating a Desktop Entry.

Setup SSH

Now for using GitHub, you will want to setup SSH and GPG. We’ll start with SSH.

Follow these steps to generate a SSH public and private key for your Pixelbook. If the part about “Adding your SSH key to the ssh-agent” is empty, scroll to the top and make sure Linux is selected. Then follow those steps. I reported this issue to GitHub, so manually selecting Linux for Chrome OS should not be required once they fix their user-agent detection.

Open GitHub SSH and GPG keys and create a new key with the contents of id_rsa.pub. You can get the contents via

cat ~/.ssh/id_rsa.pub

Now back in WebStorm, you need to set up GitHub under File->Settings->Version Control->GitHub. Check the box for “Clone git repositories using ssh”. Then click “Add account”.

Fill in your username and password. It will prompt you for your 2FA code in the next step. If that is successful, GitHub will be configured properly.

Additional SSH Agent Configuration (optional)

If you created your SSH key with a password (recommended), then you need to make sure the SSH Agent prompts you for your password after a reboot. There are many options available for doing this task. We’re going to use a simple setup that uses an open source package called keychain.

In your Linux Terminal, install keychain:

sudo apt-get install keychain

Open your ~/.bashrc file and add the following line at the end:

eval `keychain --eval id_rsa -q`

This setup will prompt you for your SSH key’s passphrase only once per reboot.

Note: You can use vi to make this change or install something like nano if you prefer. Remove the -q if you want keychain to print some information every time you open a shell. This comes from a couple different sources: StackOverflow, Unix StackExchange.

Setup GPG

Check if you already have GPG2 via

gpg --version

If not, in your Linux Terminal, install GPG2:

sudo apt-get install gpg2

If you have a new Pixelbook, then you can go straight to installing GPG. If your Pixelbook is not new, then you should check if you have any existing GPG keys.

Follow these steps to generate your GPG key and export it to a format for adding to GitHub.

Setting up a GPG key allows GitHub to show the green “Verified” label next to the commits in your Pull Requests.

Clone a repository in WebStorm

In WebStorm, checkout a Git repository:

If you successfully logged into GitHub earlier, then your repositories will be available in the URL drop down.

Note that the first time you clone, it should warn you about an unknown host and allow you to add that host and remember it.

Also make sure that you choose a directory in your home directory and not in /root/. It picked ~/Webstorm/Projects/ for me.

Configure WebStorm

If you use WebStorm on another computer, you can sync your settings there and have your Pixelbook pick those settings up easily.

On your Pixelbook, in the bottom right-hand corner of the screen, click on the Gear with the question mark. Then select “Enable Sync…”

Select the option that works best for you. Then after a minute, you should be able to click on the Gear again and either Sync your Plugins silently (e.g. install all the plugins that are on your other computer and disable plugins that are disabled on your other computer) or choose which plugins should be synced and which should not.

Install NodeJS and NPM via NVM

As described in the NVM docs, in the Linux Terminal run:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

Reload your terminal to get access to NVM by running: source ~/.bashrc

Now running nvm --version should output 0.33.11.

Install NodeJS LTS (Long Term Support) and the matching version of NPM by running:

nvm install 10

Setup NodeJS in WebStorm

In WebStorm, open File->Settings->Languages and Frameworks->Node.js and NPM. Node and NPM should be automatically detected. Check the box for “Coding assistance for Node.js” and press OK.

Now restart WebStorm so that it can initialize some more NPM features. When WebStorm opens again, you should see a popup where you can have the IDE run npm install for you.

Run a NPM Script

WebStorm makes it easy for you to open your package.json file and run one of the scripts provided by the repository.

Install Yarn

Many Angular projects now require Yarn.

The easy way is to do npm i -g yarn, but you can also use the following steps taken from the Yarn Install docs for Debian:

Add Yarn’s public GPG key and repository to Debian’s package manager by running the following in your Linux Terminal:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

In your Linux Terminal, install yarn:

sudo apt-get update && sudo apt-get install --no-install-recommends yarn

Check the installation was successful by running yarn --version which should output a version similar to 1.12.3.

Similar to above, WebStorm will prompt you to run yarn install when you open a new project that uses Yarn.

Conclusion

Please note that the steps above for WebStorm are nearly identical if you are installing IntelliJ IDEA or many of the other JetBrains IDEs.

I hope that this post is useful to some intrepid developers who are ready to get productive with their Pixelbooks! Please leave comments if you run into any issues or if something doesn’t work, and I will try to update this post.

If you haven’t checked it out yet, DevFest Florida is happening at Disney World’s Contemporary Resort on January 19th. The list of speakers is really impressive. Tickets for students and professors are only $99 (plus fees) and general tickets are $175 (plus fees).

If you are interested, I am happy to offer readers 25% off of general ticket prices using this link! I hope to see some of you there.

References

Some information for this post was taken from the helpful Crostini community on Reddit.

I was also able to get Gimp 2.10.x installed thanks to the ChromeOS community on Reddit.