Web Development on a 13″ MacBook Pro M1

Monday, Feb 15, 2021

by Jeff Rainey

Last week was super busy and I was cranking late, testing a project that would be rolling out for release the next morning. I made some final adjustments before putting an old friend to sleep for the last time. My 2015 15″ MacBook Pro had served me well for years but when trying to awaken it the next day I got the flashing folder of doom.

I tried many things to bring the machine back to life including:

Reset the NVRAM
Reset the SMC
Startup in recovery mode
Startup in diagnostics mode

Everything was pointing to SSD failure. I had another SSD since I had upgraded mine a few years ago and even that one wouldn’t work. Recovery mode was not showing the drive at all. After losing half a day of a work it was beginning to look as if the issue is connectivity to the drive. It could be as complex as the logic board or maybe the issue is someplace else… I gave into the fact this was not going to be resolved quickly and decided I needed a new machine and fast. My old 2015 was heading for retirement before this but I was holding out for the 16″ MacBook Pro M1 or whatever M chip it will have. I like a larger machine, screen and was leery about having only 8GB of RAM on board. But, beggars can’t be choosers so I snagged the last one from my local Best Buy. I also needed to get up and running quickly, so downloading my image from Backblaze was not really an option. So, I opted to get the HDD version of my data and restore as I go. That should be here later this week.

First Impressions

Out of the box this thing looks and feels great. It weighs much less than my 2015 model and is much thinner. Yes, it is smaller but still the weight very noticeable. The 13″ MacBook Pro is also really snappy compared to my old 2015 model, another plus. I have mixed feelings about the Touch Bar. On one hand having emojis available while typing is kind of nice. I have also seen a few more decent uses of this but overall, I just kinda want my buttons back. The touch pad to unlock is kinda cool but nothing beats unlocking with my watch. However, passwords to sites and ApplePay with my finger is pretty nice. And, speaking of touch, the trackpad is HUGE. I was really concerned that I would be accidentally touching it all of the time, but it doesn’t seem to happen that often.

The RAM

8GB of RAM… This was a huge downer and the thing I worried most about. I was constantly hitting the ceiling on my old machine with 16GB. To my surprise, these machines do more with less RAM and I have not had trouble with this yet. I am not quite sure how this is possible but it just seems to find a way.

Battery Life

Everything you have heard is true. The battery life is insane. I left work on Friday and worked on the machine over the weekend several times for maybe 4-5 total hours and the battery is still 3/4 full. For my old machine I had 2 cords, one for work and one for home. Initially I thought I would need a second cord for this Mac M1, but I really don’t think that is necessary. My monitor at work accepts USB C as an input so I may never even use the power supply that came with the machine. For now, it just stays in my laptop bag.

Web Development on a Mac M1

Another major concern I had was how well this machine would do with web dev tools. I remember the move to Intel and parts of that did not go smoothly.

First up, Git

I didn’t have any projects load up yet and out of habit I ran to my development directory to get started.

git clone blahblahblah

I was prompted that Git wasn’t installed and given a button to click to install it. Nice 👍

Node, npm and Local WordPress

Both installed fine and run as expected. Pulled up a WordPress site.

npm install

npm start

Right, I don’t have any local WordPress environments installed yet. Installing Local by Flywheel runs fine as well. At this point, I have Teams, Local By Flywheel, PHP Storm, Chrome (with about 10 tabs), Photoshop, Spotify and another Node server running Browser Sync. Somehow, all of these tasks are only using just over 6GB of RAM.

But, something is not right…

At this point, development on the new M1 feels just fine. Until, I started working on a more complex React project. I kept running into issues with npm not having permission to install packages. The fix is to install npm via nvm but that was having issues as well. I got around this by installing Rosetta, apparently it is not installed by default?

/usr/sbin/softwareupdate --install-rosetta --agree-to-license

Next, I set the Terminal to open using Rosetta and installed nvm so I could install npm this way. This is a recommended fix for people having trouble with npm permissions.

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

Once the install is complete, add the following to the bottom of the .zshrc file.

export NVM_DIR="$HOME/.nvm"
#This loads nvm
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
#This loads nvm bash_completion
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

I found this bit of help by Cristobal Schlaubitz. Now we can install npm via nvm and all is well!

nvm install node

Conclusion

Last week was plenty busy and I certainly was not trying to tackle setting up a development environment on a brand new M1 chip. But, now that it is over it is feeling quite nice. The machine is so fast and somehow works well with only 8GB of RAM on board. My initial thought was that I would sell this one when the 16 comes out, but it is really growing on me. We’ll see I guess.