How to Setup a React Developer Environment with nvm

[00:00 - 00:17] Alright, so before we dive into coding, we're going to make sure our development environments are all set up. So I'm going to be using VS Code or Visual Studio Code for this course, but you 're totally free to use whichever code editor you're most comfortable with.

[00:18 - 00:33] The theme I'm using is Halcyon theme, which I made myself. This is available on Visual Studio Marketplace if you want to grab it, and the font I'm using is Vera code.

[00:34 - 00:52] And for my terminal, I'm using iterm2, and I'm using the spaceship prompt, which is what gives me this cool little arrow, and it tells me what branch I'm on. It also tells me cool things like the node version, package version, and time.

[00:53 - 01:12] And in addition to a spaceship theme, I'm also using some custom colors that I kind of predefined myself based on my Halcyon theme, and you can grab it here if you'd like. So the next thing we're going to want to do is install a tool called NBM, which stands for node version manager.

[01:13 - 01:45] This is a CLI tool that makes it super easy to switch between different node versions when you're working locally between JavaScript projects. And the way it works is basically you define a NBMRC file in each project, and whoever uses your project or clones your project can use that NBMRC file to install the right node version with the NBM CLI.

[01:46 - 02:07] So to install NBM, you can find this GitHub repository with a quick Google, but this is the official NBM repository. And if you scroll down and if we visit install and update script, there's this script that they provide to install NBM on your machine.

[02:08 - 02:18] So I would recommend coming here and copying this curl command. And in your terminal, you can paste it in and hit enter.

[02:19 - 02:46] It doesn't really matter if you're seeded into a project or not, as long as you 're in your terminal, it should be fine. So once that finishes, you can see it says, "Close and reopen your terminal to start using NBM or run the following to use it now."

[02:47 - 03:23] So I can see that this is not only the same, but it's not only the same, but it 's not only So make sure that nvm version prints out version number for you. And next we should make sure that node also came along with nvm.

[03:24 - 03:39] So to make sure that's installed, you can type node-v and make sure it prints the version as well. And in addition to node, we can also make sure that we have npm, properly installed with npm-v.

[03:40 - 03:50] And again, I am using this node version 14-15-0. And this npm version in this project.

[03:51 - 04:01] But as long as you have a node version that's greater than node 10, you should be fine. And I would recommend upgrading to npm7 if you're not already on it.

[04:02 - 04:20] But if you're not, you can simply type npm install-g npm at latest to get the latest version of npm. All right, so the next thing we want to do is set up a new project directory for the code that we're going to be writing for this app.

[04:21 - 04:37] So in your terminal or however you're comfortable, create a new folder on your computer, wherever you like to keep your projects. So we're going to type in, make der, newline, Spotify app.

[04:38 - 04:43] And it doesn't have to be a newline-spotify app. It can be any descriptive name you want.

[04:44 - 04:57] But once you create it, cd into it. And then we're going to use the npm init-y command to create a new empty package.json file in the directory.

[04:58 - 05:19] And then after that, we're going to create a mvmrc file like we talked about before. And then if we pop open our new project in VS Code, we can go to our mvmrc file and then specify which node version we want to be using.

[05:20 - 05:43] So since I'm using, I'm currently on 14, 15, 0, I'll just type that in here. So now if there's anyone who wants to clone your project or something like that , they can, as long as they have mvm properly installed on their machine, come in to your project, cd into it and type mvm install.

[05:44 - 05:52] And that will make sure that they're on node 14, 15, 0, regardless of what node version they were on before. All right, so lastly, we're going to create a git-ignore file.

[05:53 - 06:13] Just to make sure that once we start committing things to source control, sensitive or unnecessary files like node modules or environment files aren't committed and pushed up to a public repository. So in here, we'll just add ds-store and node modules.

[06:14 - 06:17] All right, now we're ready to go.