Jonathan Reeves

Posted on Dec 4, 2020

How to setup Development Environment on new Macbook Pro M1

#javascript #typescript #rust

Feeling Lost

Hello if you bought the new Macbook Pro with the M1 chip and you are struggling to setup your development environment then I hope this post finds you well. I will be walking through how to set up your environment for two languages, TypeScript and Rust. I guess technically it's more like three as in order to set up a working TypeScript environment you have to have a working JavaScript environment but eh. Without further ado let's get started.

Installing Homebrew

Now Homebrew doesn't install as cleanly as you would like it to if you are coming from an Intel based mac. For this issue the recommended approach is to install Rosetta 2. Rosetta 2, for those of you not familiar with Rosetta is an emulation software that allows the use of Intel based apps to run "natively" on the M1 chip. This is the recommended way of running the apps you are used to. At least for now. If you are like me and didn't experience the first edition of Rosetta back on Tiger then you might be in a good spot as I have yet to have any issues with it running what I need. So with that let's open up our terminal, in my case I am using iTerm2 and will be modifying my ~/.zshrc file if you are using bash then I am assuming you are familiar with configuring your respective .rc file.

$/usr/sbin/softwareupdate --install-rosetta

or if you don't want to install Rosetta 2 via an interactive prompt then you can run this command

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

No matter which option you went with you will now be able to install and run Intel based apps such as Homebrew, which at the time of writing is still in its development stage and working out some kinks.

Installing Homebrew

Now that we have Rosetta 2 installed and ready to go we can start using Rosetta to install some programs such as Homebrew.

$arch -x86_64 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
$arch -x86_64 brew update
$arch -x86_64 brew search node
$arch -x86_64 brew install node@14 # please feel free to choose whichever version of node you want to use. I just did 14 as it is the LTS version at the time of writing.

With those commands finished we have now installed both Homebrew as well as node. Pretty awesome right?

Install Rust

Now the next thing we are going to install will be the Xcode cli tools. In order to this we are going to type:

$xcode-select --install
# This is going to bypass the need for installing the whole
# Xcode application though I do recommend installing it when
# you can
$arch -x86_64 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
$source $HOME/.cargo/env

Alright with that we now have Rust installed and we can test that out now. With that last line there you are adding the cargo command globally so you don't have to type:

$arch -86_64 cargo name of command

Testing TypeScript, Node and NPM

Now that we have all of our tools installed we are going to test that each one of them is working correctly. Earlier you may have noticed that I had you install the XCode CLI tools. I ran into an issue when trying to use cargo to run my projects and realized that I needed to install the CLI. If you are receiving an error that looks similar to this:

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools),
missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun

You will also get that error message if you are trying to run common commands for git such as:

$git clone <name of repo>

The fix for that is to install the xcode cli tools from earlier. Moving on, now we are going to try using NPM

$npm install -g typescript
$cd ~ # this will take us to the home directory
$mkdir Development && cd Development && mkdir ts-playground
$npm init -y
$mkdir src && cd src && touch index.ts
$cd ..
$touch tsconfig.json
$npm install --save-dev typescript tslint @type/node
$touch tslint.json
$code . # If you are using another editor please open the
        # the directory in your favorite editor instead

The above command just globally installed TypeScript, created a new directory named Development in our home directory and inside of Development we created a new directory called ts-playground to store our test files that we created. Inside of our editor we will modify these files like so:
index.ts

let name: string = "Your name here";
console.log(`Hello ${name});

tsconfig.json

{
    "compilerOptions": {
        "lib": ["es2015"],
        "module": "CommonJS",
        "outDir": "dist",
        "sourceMap": true,
        "strict": true,
        "target": "es2015",
    },
    "include": [
        "src"
    ]
}

tslint.json

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "semicolon": true,
        "trailing-comma": false
    },
    "rulesDirectory": []
}

Now that we have those files created and filled in we can test that all is working by opening our terminal, since I am using VS Code I will just open the integrated terminal and type:

$tsc
$node dist/index.js
Hello Your name here

Once you have successfully seen the message printed to your terminal you are done with verifying that your TypeScript dev environment has been setup. Now for some Rust.

Cargo and Running Rust

In our terminal we can now change back into our Development directory and create a new directory for storing our Rust code. I like to name my directories based on what I am working on so again we will name it rust-playground. Follow the commands below:

# The following commands are being based on the terminal
# still being opened and in the ts-playground directory
$cd ~ && cd Development && mkdir rust-playground 
&& cd rust-playground # This should be on one line
$cargo new --bin hello
$cd hello
$code .

Now we can open our main.rs file in our favorite editor and modify the file to have a more custom greeting than the boiler plate Hello world! message.

fn main () {
    prinln!("Hello , Your name here");
}

Back in our terminal or from within the integrated terminal we can run:

$cargo run
Hello Your name here # expected output from program

With that we are now finished and you should have a working dev environment for both TypeScript as well as Rust.

Conclusion

Hope you enjoyed this tutorial and that you are now able to work with your new mac and the tools needed in order to develop awesome apps. As always see you in the next one.

Top comments (11)

Jim Montgomery • Jan 2 '21

thanks for this! btw brew is available for apple-silicon with some packages--I think you can run it alongside the x86/rosetta one at /opt/homebrew and it includes node latest v15. I was able to install cargo for apple-silicon on m1 too per the release within a few days of this article: blog.rust-lang.org/2020/11/27/Rust... more on brew details at github.com/Homebrew/brew/issues/7857

Jonathan Reeves • Jan 2 '21

Thanks. Glad you liked the article and thank you for the refrences. I will update my post with these by the end of the day today so people know that there's alternative solutions. Thanks again.

jan paul • Dec 4 '20

Hi man. Ty for the writeup. I also thought about replacing my 2016MacBook Pro with ARM one, but after speaking to collegues about the differences of the architecure, i decided to wait like 2 years. Then i will check for the most common tools and their compatibility.

Jonathan Reeves • Dec 4 '20

I definitely see where you're coming from. I decided to go ahead and get the laptop because I have been developing on Windows computers for about 2 years now and have hated every minute of it. I started my developer journey on aac and switched to windows in a very regrettable decision. I then found a new job where we now develop solely on macOS and decided to go ahead and buy my own MacBook but get the M1. Other than the slight learning curve of Rosetta 2 and the command you need for installing and running the Intel based software I would say that the M1 is faster than my work Mac which is the late 2019 model with 6-core i7 and 16GB of Ram. I am thoroughly enjoying the new MacBook pro. Of course the 16" would have been better but as that hasn't come out yet I have grown accustomed to the 13.3 inch screen since all of my personal projects before this laptop were on a surface laptop which is similar in screen size.

LukeAnnison • Apr 30 '22 • Edited

Great article. Thanks very much for this. FYI there is a typo in the npm install --save-dev typescript tslint @type/node command. Types should be a plural, so:

npm install --save-dev typescript tslint @types/node

Also in index we are missing a string literal at the end.

Hope this helps!

Lee • Dec 4 '20

Yay! Can’t wait to get my hands on one of these. Coming to AWS in 2021 too!

Jonathan Reeves • Dec 4 '20

It's a really great laptop and I have enjoyed every minute I have used on it. Xcode install took next to no time compared to my work Mac which is last year's 16" 6-core i7 with 16GB of ram. So it's a very fast machine. The benchmarks aren't lying. The ones I saw on youtube that is. Not quite sure what you mean about coming to AWS in 2021 though.

Samuel Smith • Dec 5 '20

Hi, I am about getting one MacBook Pro M1 for myself.
What would you recommend as the best approach to go with Docker since Docker Desktop isn't supported yet.

Jonathan Reeves • Dec 5 '20

I would have to research that to be honest. I don't use Docker currently but I'm m sure there is a workaround for it. I'll update this post once I find an answer for you.