Setting up Raspberry Pi for UI Development

This post is a followup to my previous post on using raspberry pi 4 as a daily driver or secondary development PC https://thepro.io/post/minimal-setup-for-a-modest-daily-driver-raspberry-pi-based-development-pc–YO .

In this post, we will be setting up node.js and visual studio code on raspberry pi 4 for UI development.

Photo credit – Fotis Fotopoulos @ unsplash.com

Overclocking

I feel that without overclocking, the raspberry pi 4 is slow for development. Although overclocking doesn’t make it super fast, it is still better in terms of usability in comparison.

Edit config.txt file

sudo nano /boot/config.txt

Following configuration seems to work fine for me. Uncomment or add these setting to the config.txt file

over_voltage=6
arm_freq=2000
gpu_freq=700

to tweak further on these setting to improve performance, do read the articles linked in the reference section below.

Node.Js setup

Node.js 15 is the latest iteration at the time of writing, so let’s install it

curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -
sudo apt-get install -y nodejs

to verify installation, Issue the following command. This should print the version installed

node --version

Visual Studio Code Setup

Go to https://code.visualstudio.com/download and download either Arm or Arm 64 debian package, depending on the version of raspberry pi OS you have setup.

To check, issue following command in the terminal. If response is ‘armv7l’ choose Arm and if ‘aarch64’ then choose Arm 64 for 64 bit version of package

uname -m

once the .deb file is downloaded. Install the package using following command

cd /Downloads
sudo dpkg -i code_*.deb
visual studio code screenshot

Create Sample Project :

To check if everything is setup correctly, let’s create a new next app

npx create-next-app sample
create nextjs app

ok npx seems to create project successfully. Now open visual studio code and run the newly created project.

cd sample
npm run dev

Open browser and go to http://localhost:3000/ , you should see nextjs demo page loaded, which implies that everything we have done do far has been successful.

visual studio nextjs demo screenshot

We have successfully installed the latest version on nodejs and visual studio code. Remember that this is a tiny low power PC, so do not open too many tabs on browser or run other programs simultaneously to avoid slowness while coding.

References :

https://magpi.raspberrypi.org/articles/how-to-overclock-raspberry-pi-4