Is Ember your first front-end framework? Here’s how to set up your Mac dev environment!

The Ember Learn resources are awesome, but they assume you already have npm set up. So let’s talk about how to set up your Mac. This article is aimed at new devs, such as those who completed a bootcamp/college, or who want to break out of only knowing HTML/CSS.

Note: every computer is a little different. So, this setup may not work perfectly depending on your OS and other settings you’ve made, but it’s a good place to start. This approach worked successfully on my 2o11 MacBook Pro running Sierra OS 10.12.5. I had just replaced my hard drive entirely. It’s June 2017 and the latest stable version of Ember is 2.13.2. These instructions are for Macs, and will not work for Linux/Windows.

Get a code editor: I installed Atom (my favorite) by downloading it from the Atom website, then dragging and dropping the app into my Applications. Then I install the command line tools for Atom by launching the program and then choosing Atom/Install Shell Commands from the toolbar. This lets me type atom . into the Terminal to open it from whatever folder I’m in. I also installed a whole bunch of packages to help me format my code and check it for errors. My favorites are atom-beautify, linter, console-log, and file-bookmark. Install them from Atom/Preferences/Install.

Add the terminal to the Dock for easy access: The terminal is where you’ll enter commands, and you’ll need it soon. Hit Command-Spacebar and type terminal, then launch it. Right click or control-click on the icon, choose options, and keep in dock.

Install Homebrew: Homebrew makes it easy to install certain tools like git and bower. Just follow the install instructions to copy & paste the curl command into the terminal, then hit enter. Homebrew will also install some tools like XCode that you need, if they are missing from your computer.

Check to see if you have a .bashrc and .bash_profile: Special configurations for your dev environment go in these files. In the command line, type ls -la ~ . This will list all your files, even those whose filenames start with a period. Do you see .bashrc and .bash_profile? No? Create them by typing touch ~/.bashrc then enter, then touch ~/.bash_profile . Touch creates the files, which we will need for the next step.

Link .bashrc to your .bash_profile: Open .bash_profile by typing atom ~/.bash_profile . Add one line to the top of the file: source ~/.bashrc and then save. This makes it so that both files will run when you start a new terminal.

Install Git and set up GitHub access: You don’t need these things to start using Ember. However, most devs use Git or another version control program, so if you want to be employed as a developer, you need to learn it, and it’s more involved than I can explain here. I think this tutorial is pretty great. Luckily, Git is easy to install with brew install git . Oh, and FYI, don’t put any git-enabled projects in Dropbox or Google Drive. They don’t play nice.

Install nvm: NVM stands for node version manager. Node lets you use JavaScript in the terminal and does helpful things like start servers or install packages. What NVM lets you do is switch between versions of Node. Some projects or tools may have really specific requirements about the version you can use, so it’s helpful to not constantly uninstall and reinstall Node. Follow the instructions here. Copy and paste the curl install command into the terminal, and hit enter. When it’s done, close your terminal and quit the program entirely (right click, Quit). Reopen the terminal. Remember those changes you made to .bashrc and .bash_profile? They were to help prevent problems with installation. Type nvm --version to see if it’s working. If not, refer to the troubleshooting instructions on the downloads page.

Use nvm to install Node: To get the latest, long term support (lts) version of Node, type nvm install --lts . If you know you’ll need a different version, you can specify that version number instead of lts. After nvm is done, type node -v to see which version is installed and in use.

Install an updated version of npm: npm stands for node package manager. It is a very different tool than nvm. Npm is a repository for helpful tools that other people have made, including command line tools and packages that you’ll use in your apps. Npm comes installed with Node. You can check which version you have by typing npm -v . As of the time of this article, npm 5.0 just came out and it’s great. So to upgrade, you can simply type npm install -g npm . The -g tells npm that you want to install this package globally — meaning that it will be available anywhere in your directories and projects, not just the folder you’re in now.

Install the Ember CLI: Here we are at last! It’s really easy. npm install -g ember-cli . But what is the Ember CLI? It’s a command line tool that helps you to create new Ember projects, run them on a local server, add new features to your app, and install packages made by the community. When you’re working in Ember, you should never copy and paste files around. You should generate them using the CLI tool. There are some naming conventions and folder structures that your files need to follow, so using the CLI is the best way to make sure you’re doing the right thing. It might seem a little strange to be working from the terminal if you’re a new developer, but the instructions are well written.

Figure out how to navigate to files in the Terminal: Great, so you have an ember command line tool! But it’s only useful to run certain commands when you’re inside a project’s folder (aka directory). So how do you do that? There are really only 2 file navigation commands that you absolutely need to know at first. ls will list the files in your current folder. cd means change directory — you use it to open a folder. If you type ls now, you will probably see something like Applications, Documents, Downloads, etc. I like to make a folder at this level called projects, where I put all my apps. You can create a folder from the command line with mkdir projects or create it using the regular Mac finder. After you’ve used ls to check which files are in your current folder, you can do cd projectsto enter the folder. Likewise, after you follow the instructions below to generate your first Ember app, you will do cd your-app-name . Once you’re inside that folder, you can use the ember cli to do things like start a server. To go back up one level in the folder structure, type cd ..

What now???

The Ember Quickstart, Tutorial, and Guides are the best place to start if you’re learning Ember. They will walk you through how everything is connected, as well as how to connect your app to a back end. The best way to learn is by doing. It’s not enough to just read the guides. You shuld try working through the activities. Once you finish the tutorials, you can get addons for your app by checking out Ember Observer. Anything in Ember Observer can be added to your app by doing ember install <package-name> and it will just work out of the box. If you want to use any regular old npm packages in your app, I recommend installing ember-browserify and following the special import syntax.

Any time you get stuck, even with the tutorials, you can ask some other Ember devs for help. You can join the Ember Discord by following the links on the Ember Community page. I recommend that new developers generally post their Ember specific questions in the “help” channel and mention that you’re just getting started with Ember so that other devs can give answers at your level.

There are also many awesome video tutorials at all levels… some paid, some not. Notably, check out Ember School, an Ember course on codeschool, Ember Map, Ember Screencasts, and YouTube in general.

Have fun :)