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.