Project repo and NPM

- [Instructor] Our first step is to set up the development environment for the project. You need Node.js. You can download it from Node.js org for your operating system or if you are on Mac, you can use Homebrew. By the way, I'm recording this course on a Mac machine and some of the commands I'll be using might not be available on a Windows machine. I apologize if you're on Windows, as you might need to look up alternatives to what I'll be using in the course. Once you have Node installed, you should have three command line interfaces, Node itself, NPM which is Nodes package manager that will be using to manage the project's external dependencies like React and Webpac and many others. NPM is the default package manager in Node. There are a few alternatives to NPM. The most popular alternative is Yarn, but to keep things simple for this course will use the default NPM. There's also NPX which can be used to execute external packages without adding them as dependencies to the project but it's also handy for executing packages that are in the project dependencies. You'll also need git, git is a source control tool used to manage a project history and collaboration. We'll use it to clone the initial project repo and you can also use it to sync with the project progress if you need to skip ahead or back. Git comes installed by default on most Mac and Linux machines, but if you don't have it it's easy to install either directly or through Homebrew on Mac as well. With git Available Clone this course repo you can copy the repositories URL from the GitHub UI right here and use Git Clone that URL to clone the repo locally and lets CD into it and take a quick look. This repo has git branches that you can use to sync up with the code Progress. Every video in this course has an associated git branch in the repo. You can use these branches to compare your code to mine as we make progress or fast forward code progress. Let me open up my code editor on this repo I use VS code, but you can use any editors, but if you're not using VS code, I encourage you to try it out. It's really great for JavaScript projects because it has TypeScript integrated into it and that gives the editor a lot of power. The initial state of this repo is empty. There's only a Readme file, but to keep our focus on what matters, I've included a few files under this copy folder as a reference to what configurations are needed to run this project and we're going to be copying these files to their location when we need them. You'll see here's some configuration files Fores Lin for Docker, for prettier TS config and Web pack. I've also included a CSS style file, which we'll use as is for the project and a script to load test data into MongoDB. I'll explain all these files when it's time for us to use them. To configure a React application, you have many options. You can use the Create React app package to create a template for a React application. This is a great option if your focus is on React itself. It however does not support server side operations out of the box. Another option is to use the Reactful package. This is a small package I wrote to create a template React application that's configured for server side operations. Both of these options support creating a template that runs with Babble or TypeScript. You'll need either of these options in the React application. React uses a special syntax named JSX for building components. JSX is a JavaScript extension that browsers don't understand natively, so in a React application we use Babble or TypeScript to transform JSX code into regular JavaScript that browsers understand. In this course, I'll be using TypeScript for that purpose. Don't be overwhelmed by that though. We are only going to use TypeScript for that purpose and we won't go into using typescripts for strong types in JavaScript. However, just having TypeScript as the engine to run the project gives us a lot of power out of the box. Editors can use TypeScript to detect problems in the code even without defining new types. The tools in the JavaScript ecosystem move fast and change their APIs and interfaces often. I wrote an article about configuring a full stack JavaScript environment for Node and React using TypeScript and I've been updating it with new changes that affect the process. If you run into troubles while configuring your environment for this course, check out this article and see if you need to do something different. I'm actually going to configure the project manually so I won't be using Create React app or Reactful. I think this is a good learning opportunity for us to talk about the packages we'll be using and what role each package plays. We have an empty directory in our first step is to make it into a Node application and to do that we need to create a package.json file. The easiest way to do that is to use the NPM in it command. This asks you a few questions about what is the name of the project, what version it is and it has the defaults that you can use so I'll use all the defaults and enter to create package.json, package. json showed up right away and these are the default answers. We can now start documenting the project's external dependencies using the NPM install command. For example, let's start with TypeScript. When this install command is done, you'll notice that we now have a Node modules folder and a package lock file. This lock file is automatically generated and updated when we run NPM commands like install or update. NPM uses this file to describe the exact tree of dependencies and to later be able to generate an identical tree of dependencies regardless of what updates happened to these dependencies. The dependencies are installed under the node modules folder. As you can see, we have a TypeScript directory there. Now that's the source good of TypeScript and Node is going to use that to transform JSX into vanilla JavaScript. The entry point for TypeScript is actually under this dot bend directory. See this TSC file? That's Typescripts CLI command line interface. To invoke this executable CLI. We have options. You can't invoke it directly like this but you can use NPX. NPX detects that the project has this dependency and it finds the executable and run it. You can also use NPM scripts in package.json notice this script's property under which we can define tasks for the project. The default one that was generated is this test task and note how it uses shell commands like echo and exit. This test script is just a placeholder but we can execute it using NPM run test and NPM actually has a shortcut for some common tasks like test so we can use NPM test directly and with that NPM executed the content of this test script. The cool thing is if we use executable here like TSC, NPM will find them under that dot bend directory and execute them. Note also how NPM documented this new TypeScript dependency under here and note this version string which means any version of TypeScript that's on the major four X branch. This is used by NBM install and update commands to figure out which version to use. When someone clone this project from GitHub they don't get the node modules folder. Let's simulate that by removing the node modules folder. When you get the project in this state all you need to do is to run NPM install command generically like this and NPM will read all the dependencies required from package.json and figure out what versions to use from package.json and install them under the node modules folder. A project can have two types of dependencies production dependencies and development dependencies. Let's install ES lent and prettier to explain that the i here is just a shortcut for install and you can install multiple packages like this. These packages fall under code quality. They help us when we write code in our development environment and they are not needed to run the code in production. That's why I'm going to make them development dependencies by adding the dash dash save dev flag or we can use dash capital D as a shortcut, with this flag, NPM documents these dependencies under different property and package.json dev dependencies. On a production server, when you run NPM install these dev dependencies will not be installed. We're going to configure these dev dependencies last. You might be wondering isn't TypeScript a development dependency as well? It kind of is. We absolutely don't need TypeScript to run the code in production. However, sometimes the production deployment strategy is the deciding factor here. TypeScript is our compiler. Should we compile the project locally and push compiled code to a production server, or should we push the code to a production server and compile it over there? I like the latter option, and for that we need TypeScript to be a production dependency.