Environment & Setup

Brad Traversy
A free video tutorial from Brad Traversy
Full Stack Web Developer & Instructor at Traversy Media
4.7 instructor rating • 16 courses • 282,915 students

Learn more from the full course

MERN Stack Front To Back: Full Stack React, Redux & Node.js

Build and deploy a social network with Node.js, Express, React, Redux & MongoDB. Fully updated April 2019

11:51:20 of on-demand video • Updated November 2019

  • Build a full stack social network app with React, Redux, Node, Express & MongoDB
  • Create an extensive backend API with Express
  • Use Stateless JWT authentication practices
  • Integrate React with an Express backend in an elegant way
  • React Hooks, Async/Await & modern practices
  • Use Redux for state management
  • Deploy to Heroku with a postbuild script
English [Auto] All right guys so before we get started I want to go over our environment. I want to go over some of the tools we'll be using some of the text editor extensions and stuff like that just so you can see exactly what I'm working with. And you can pick and choose what you want some things are mandatory some aren't. So we'll go over everything. First of all you're going to need no Jay asked. This is a Marine stat course. We're working with the express framework. So we need node and you can get that from no J.S. dot org although I'm sure most of you probably have it installed already and you can use either the long term support or the the current version. So next you'll need a text editor I'll be using V.S. code which is what I would recommend. However if you want to use something like Sublime Text or atom that's fine too. I will be going over some of the extensions and settings that I'm using as well. And it's of course it's cross platform so it doesn't matter which OS you're on. So next is get which is a version control system you will need this at the end if you want to deploy to Heroku as we'll be doing. But I would also recommend that you create a get repository and you make commits along the way as you progressed through the course. I'll be doing this off camera. Next you need postmen to make HDP requests to our server to our back end. Basically we're going to create an API first and we need a way to test it because we won't have our front end yet our ReACT front end. So postman we're gonna be using that to make get requests post requests get data from the database all that stuff. So you want to download that nexus react developer tools which is a Chrome extension. And this I mean I guess you don't really need this redux dev tools I would say you need reactive tools just helps you look at individual components state and props and stuff like that. We'll be using it and using it a little bit. But the redux dev tools you definitely need because this shows our entire application level state. It shows us all the actions that are fired off and I just I couldn't imagine developing anything with redux without using the dev tools. So those are pretty much the system wide tools that we'll be using. So now I'm going to jump in David's code and we're going to take a look at some of the extensions and there's not too many. One is this bracket pair colonizer which of course is not mandatory. I like it because it just kind of visually organizes my blocks. So curly braces parentheses brackets it'll add a color and then if you nest inside of it another block that'll be a different color. So it just kind of organizes things visually also fraught for react in redux. I'll be using whereas it's quite a few extensions here. So this iOS 7 react redux graph. Q L react native snippets which is kind of a mouthful but this gives us a bunch of shortcuts to do things like generate components generate prop types. It allows us to write our code much faster so I will be using this and I'll go over some of the shortcuts as we move along. So next let's see. I think there's one more prettier so prettier is a code for matter and I have it set for instance to add semicolons if I forget one to change double quotes to single quotes and then we'll do this when I save. Now if you want this to happen if you want to format on save you have to edit the setting here. So what you would do is go to settings and search for format on save and you want to make sure that this checkbox is checked. All right. And just to show you some of my pretty or extent pretty or settings let's have I have the JSF single quote checked and I have the regular single quote checked. But of course if you want to use double quotes that's fine if you don't want to use semicolons in your code you want to uncheck this right here the semi value is options for like trailing commas and stuff like that. But I keep it pretty pretty vanilla. Now I'm going to go into my edit my settings dot Jason File here which is my custom settings and I just want to show you this right here. OK. Now if you want to be able to use to move that if you want to be able to use Emmett within JSA ex or within react you have to add this to your settings file. So it's this Emmett dot included language or included languages and then javascript javascript react. So this will allow you to be within J.S. sex and do for instance H1 enter or tab and it will create those tags for you. So I will be using that. So I would recommend adding that to your settings. And these are my other settings a lot of it is for you guys the font size is pushed up word wrap is on so. So the code doesn't go off the page stuff like that. Now one other thing I want to mention for Windows users if you want to use get bash so if you download get and you're using Windows is a really nice tool called Get bash which is it's a it's a terminal for windows that's Unix based so it's it's much better than using the standard Windows command line. Now if you want that within your V.S. code terminal so envious code we can go to view terminal or just make this a little bigger or we can just toggle it with control till day or command till day like that. OK. Now if you want this to be get bash you can add a setting in here. So if we go to let's just search for get bash this code and it should give us the document page right here integrated terminal and V.S. code. And if you scroll down you'll see right here this terminal integrated shell windows and you can set it to the path of bash dot EMC which is your get bash program. So if you want you can just copy this and you can put it in here and then you'll no longer have the standard windows command prompt as you're integrated terminal you'll have the get bash. So I would suggest that for Windows users unless you're already using something like like the Windows subsystem for Linux or something like that. All right. So just wanted to mention that. But those are the tools and the settings that I'll be working with throughout the course. So if you want to install some of those extensions or if you don't want to that's fine too. But I just wanted to show you what I'm working with. All right. So in the next video we're going to go ahead and set up our Mongo DB database and we're going to get started on our backend.