Coding

ReactJS Basics – #2 Setup Workspace with Webpack

  • 00:00:00 hi just a short announcement you are
  • 00:00:03 seeing this before the video starts I'm
  • 00:00:04 actually recording it after I've
  • 00:00:06 finished it I'm just saying this video
  • 00:00:08 is rather long as you can tell by just
  • 00:00:11 clicking on it and I go through the
  • 00:00:13 development or the setup process step by
  • 00:00:16 step if you already know how to set up a
  • 00:00:19 react.js project feel free to skip
  • 00:00:21 through it and just go to the github
  • 00:00:23 code so the code provided you get a
  • 00:00:25 repository individual description to get
  • 00:00:28 the finished setup I just wanted to make
  • 00:00:31 sure that everyone interested is able to
  • 00:00:34 follow along what we're doing here with
  • 00:00:37 that have fun with the video or see you
  • 00:00:39 in the next video where we actually
  • 00:00:41 start with react.js
  • 00:00:42 as promised let's start from the very
  • 00:00:45 scratch I'm in my terminal window here
  • 00:00:48 command line on Windows and I never get
  • 00:00:50 it into the folder where I want to
  • 00:00:52 create my react.js project now I'm going
  • 00:00:56 to create one single project and I'll
  • 00:00:58 extend it step-by-step I will create
  • 00:01:01 different branches with git so that
  • 00:01:04 you're able to download the code of each
  • 00:01:07 step from a github repository provided
  • 00:01:10 in the video description
  • 00:01:11 so the first step of course is to create
  • 00:01:14 a new directory so I'll create one and I
  • 00:01:17 will name it react.js basics I'll then
  • 00:01:21 navigate into this new directory here
  • 00:01:24 and in this directory I want to set up
  • 00:01:28 the workspace we need to work with react
  • 00:01:30 shares now react is of course uses
  • 00:01:34 JavaScript unsurprisingly so what would
  • 00:01:37 you guess we need well we need to react
  • 00:01:40 is core library and actually we need two
  • 00:01:43 parts of it we need to react to your
  • 00:01:45 score and then we need to library which
  • 00:01:48 is responsible for rendering it to the
  • 00:01:50 Dom there are two different libraries we
  • 00:01:52 need so we need to pull in these two
  • 00:01:55 libraries and then of course we are
  • 00:01:57 going to write modular code which means
  • 00:02:00 we're not going to put all our
  • 00:02:01 JavaScript code into one single file
  • 00:02:04 well therefore we need some way of
  • 00:02:08 bundling our code or making sure that
  • 00:02:11 our more
  • 00:02:12 our code gets bundled when running it
  • 00:02:15 because as you might be aware most
  • 00:02:16 browsers currently don't support es6
  • 00:02:19 imports therefore we do need to bundle
  • 00:02:21 them there are also other advantages of
  • 00:02:24 bundling your code of course for
  • 00:02:26 react.js the default way to setup a
  • 00:02:31 project so the way you will see in most
  • 00:02:33 tutorials which is kind of the
  • 00:02:35 acceptable way of creating react.js
  • 00:02:37 projects is to use webpack now if you're
  • 00:02:40 not aware of what web pack is it's
  • 00:02:43 basically a tool which allows you to
  • 00:02:46 bundle all your assets like JavaScript
  • 00:02:50 CSS and so on into a single file or into
  • 00:02:53 single files which then get imported in
  • 00:02:56 your HTML pages
  • 00:02:59 additionally web pack not only bundled
  • 00:03:01 stuff it also is able to transform it so
  • 00:03:04 – for example compile SAS code all these
  • 00:03:08 things so you can load a lot of plugins
  • 00:03:11 into web pack into this tool to really
  • 00:03:14 tailor it to the needs you need to
  • 00:03:17 tailor it to and actually we're doing
  • 00:03:19 some kind of transformation because it's
  • 00:03:22 also common to write react.js code in
  • 00:03:25 es6 syntax now he has success you might
  • 00:03:29 be aware is the next javascript version
  • 00:03:31 and also isn't natively supported by all
  • 00:03:34 browsers yet or not all features are
  • 00:03:37 supported yet they have work we will
  • 00:03:40 need to transform our es6 code to es5
  • 00:03:44 code and we will use webpack and babel
  • 00:03:47 for it
  • 00:03:47 babel simply as a es6 transpiler
  • 00:03:50 which will transpile you six two years
  • 00:03:53 five and we can load the babel plugin
  • 00:03:56 into we're peg to do that but why am i
  • 00:03:59 talking about all that well maybe
  • 00:04:00 because you need to know the core basics
  • 00:04:02 but let's get started setting up web
  • 00:04:05 pack and everything and you will see how
  • 00:04:07 it works so i'm in my brand new folder
  • 00:04:10 here which I created you react.js basics
  • 00:04:13 folder and I will start setting up web
  • 00:04:16 pack now in order to install everything
  • 00:04:18 and manage all my packages I'm going to
  • 00:04:21 use NPM
  • 00:04:23 notes package manager so if you don't
  • 00:04:25 have node.js on your machine right now
  • 00:04:28 go to node.js dot work we can go there
  • 00:04:32 together actually
  • 00:04:33 so no chaser org and make sure to
  • 00:04:37 download the latest version here on the
  • 00:04:39 right six point three point one in my
  • 00:04:41 case download it run through the
  • 00:04:43 Installer and thereafter you will have
  • 00:04:45 node.js on your machine which is great
  • 00:04:48 because we'll need it for our
  • 00:04:49 development server which hosts our files
  • 00:04:51 and even more importantly maybe we have
  • 00:04:55 NPM no its package manager which again
  • 00:04:57 we'll use to manage our dependencies so
  • 00:05:00 all the packages we need to have
  • 00:05:02 everything work the way it should work
  • 00:05:04 so with node.js and NPM installed it's
  • 00:05:08 time to open up a console like ends or
  • 00:05:11 terminal window there's a shot just one
  • 00:05:13 integrated into my IDE and then I'll
  • 00:05:16 have to initialize NPM in this project
  • 00:05:18 so with NPM in it inside this project
  • 00:05:21 folder that's important I'm setting up a
  • 00:05:24 new project managed by NPM that means I
  • 00:05:29 can use NPM to pull in packages and so
  • 00:05:32 on so I'm just adding entered and then I
  • 00:05:34 get a couple of questions I have to
  • 00:05:36 answer because it will create a basic
  • 00:05:39 initialization file for me now you can
  • 00:05:42 use the default which you see in
  • 00:05:44 parentheses here or adjust him to your
  • 00:05:46 needs I will go with the default here so
  • 00:05:49 that is fine on some basic react.js
  • 00:05:54 maybe as a description that doesn't
  • 00:05:56 really matter that's fine or fine get
  • 00:06:00 repository
  • 00:06:00 yeah we'll trade one later on keywords
  • 00:06:02 mod let's throw in a react chase here
  • 00:06:05 offer you may put your name in here by
  • 00:06:09 the way everything will work if you
  • 00:06:11 don't do that to license I'm going to
  • 00:06:15 choose MIT ok with that a brand new file
  • 00:06:19 was created package Jason and it should
  • 00:06:22 look something like that that is the NPM
  • 00:06:26 file which is responsible for managing
  • 00:06:28 your dependencies quarterly we don't
  • 00:06:31 have any but that will change in a
  • 00:06:32 second precisely it will change
  • 00:06:36 now I need a couple of dependencies
  • 00:06:39 obviously so let's install them I do
  • 00:06:42 this with MPM install and I'll start
  • 00:06:45 with the production dependencies first
  • 00:06:47 wealth protection dependency
  • 00:06:49 I mean dependencies which are not only
  • 00:06:51 need for development
  • 00:06:53 what peg would be an example for a
  • 00:06:55 development dependency but which I will
  • 00:06:57 need to have once I deploy my
  • 00:06:59 application and which important
  • 00:07:03 production dependency do I have react
  • 00:07:05 chance of course so let's install react
  • 00:07:09 yes just like that actually it's just
  • 00:07:12 react and also react Dom that is the
  • 00:07:18 second library I was talking of earlier
  • 00:07:20 which is required to access the Dom then
  • 00:07:24 I provide the – – site flag to tell NPM
  • 00:07:29 that these are production dependencies
  • 00:07:31 if you go to the updated package that
  • 00:07:34 JSON file you see that the dependencies
  • 00:07:36 were added here with that I'll install
  • 00:07:39 my development dependencies so npm
  • 00:07:41 install' and then what will we need well
  • 00:07:44 we will need a web pack and we also will
  • 00:07:48 need some kind of server which runs our
  • 00:07:51 application because we want to see
  • 00:07:54 during development and a common
  • 00:07:55 misconception is that since we're only
  • 00:07:58 doing front-end development here we
  • 00:08:00 don't need a server because we could
  • 00:08:02 just double click on the index.html file
  • 00:08:04 and view it in the browser right but
  • 00:08:06 that is actually wrong because we're not
  • 00:08:09 writing a normal HTML file we have our
  • 00:08:12 JavaScript file and we need to have some
  • 00:08:17 server-side functionalities so basically
  • 00:08:20 if you double click on your file in the
  • 00:08:23 browser you can see it in the URL bar
  • 00:08:26 it's opened with the file protocol you
  • 00:08:29 see something like file double double
  • 00:08:31 point that's German :
  • 00:08:33 / / localhost or not local as you find
  • 00:08:37 them and so on so this is the file
  • 00:08:39 protocol it's not HTTP but we need the
  • 00:08:42 HTTP protocol to really simulate the
  • 00:08:46 state as it will run later on when it is
  • 00:08:49 by a server we need that protocol to
  • 00:08:52 load any imports correctly we might have
  • 00:08:54 and so on therefore we need a
  • 00:08:57 development server and handle yet pack
  • 00:09:00 has one but we have to pull it in as an
  • 00:09:03 extra dependency it's called web pack –
  • 00:09:06 dev – server so that is web pack but I
  • 00:09:10 also need Babel remember Babel is
  • 00:09:13 responsible for transpiling es6 code –
  • 00:09:17 es5 code and since I will run Babel as a
  • 00:09:21 plug-in or loader as it is called any
  • 00:09:24 web pack world in web pack I need to
  • 00:09:28 pull in the Babel loader and I will show
  • 00:09:31 you how to configure this and web pack
  • 00:09:32 later on of course I also need three
  • 00:09:35 other Babel related packages which
  • 00:09:37 basically define which es6 commands I
  • 00:09:42 can use if you want to put it like that
  • 00:09:44 these are some presets I will need to
  • 00:09:47 not only have the transpiler but also
  • 00:09:50 the kind of logic that transpiler needs
  • 00:09:52 so these are called presets babel preset
  • 00:09:56 and the first one is es2015
  • 00:10:00 which is es6 but then i also need to be
  • 00:10:03 able preset react that's just some react
  • 00:10:07 specific babel logic it needs and then
  • 00:10:12 we have the babel preset stage – that is
  • 00:10:18 responsible for having some extra
  • 00:10:19 features like destructuring i guess was
  • 00:10:22 one of them with all that at the – –
  • 00:10:25 saved death flag – well install them all
  • 00:10:28 as development dependencies which means
  • 00:10:31 don't deploy them if you're deploying
  • 00:10:34 your application leave out all the
  • 00:10:37 development dependencies only install
  • 00:10:39 the production dependencies so that
  • 00:10:41 we're not installing something on our
  • 00:10:42 deployment server which we don't need so
  • 00:10:45 that might take a couple of seconds and
  • 00:10:47 thereafter we'll have all the
  • 00:10:49 dependencies we need in the package to
  • 00:10:52 chase the file you see these new
  • 00:10:54 dependencies now with that I'm just
  • 00:10:56 pulling in a readme and a license file –
  • 00:10:59 that
  • 00:11:00 forget that for the github repository
  • 00:11:02 later on but that's not really important
  • 00:11:05 the next step of course is to configure
  • 00:11:08 the other parts of our application
  • 00:11:11 I'll start by creating a new folder and
  • 00:11:14 I'll call this folder SRC or a source
  • 00:11:17 this is the folder where we will write
  • 00:11:19 our source code so where we will change
  • 00:11:23 code and later on I will set up web pack
  • 00:11:25 210 take all the code in this folder and
  • 00:11:28 kind of prepared for deployment and copy
  • 00:11:31 of somewhere else so in the source
  • 00:11:33 folder I will treat an app folder here I
  • 00:11:37 will write my react.js F and I will
  • 00:11:41 treat a new file any source not in the
  • 00:11:43 app folder which I'll name index dot
  • 00:11:45 HTML that of course is my root file main
  • 00:11:48 entry point of my application keep in
  • 00:11:50 mind with react yes you don't have to
  • 00:11:52 create a single page application you
  • 00:11:54 might have multiple ones but we'll start
  • 00:11:56 simple here so here I'll set up a basic
  • 00:11:59 HTML skeleton html5 skeleton like this
  • 00:12:04 give it a title of react yes basic
  • 00:12:07 something like that and should be good
  • 00:12:09 to go now I'll come back to the HTML
  • 00:12:11 file here but first let's configure web
  • 00:12:16 pack for dad whoops I'm going to create
  • 00:12:19 a new file which I'll call web pack
  • 00:12:22 config dot is now in this file and
  • 00:12:29 JavaScript file I'll write the logic to
  • 00:12:31 setup and configure web pack and now
  • 00:12:33 this is no web pack course it is or no
  • 00:12:36 web pack video it's long enough without
  • 00:12:39 being in-depth web pack lecture but of
  • 00:12:43 course it's important to understand what
  • 00:12:45 web pick does so I will walk you through
  • 00:12:47 all these steps step by step if you are
  • 00:12:49 already a where will of what web peg
  • 00:12:52 does and how it works you can feel free
  • 00:12:54 to skip this section of course so your
  • 00:12:57 web pack is the first thing I pull in so
  • 00:13:01 require it from web pack here and then I
  • 00:13:06 will also pull in path which is just a
  • 00:13:08 default node JS library which
  • 00:13:11 is globally available once you installed
  • 00:13:14 noches this will just allow me to
  • 00:13:16 resolve the path of my application here
  • 00:13:20 basically then are going to set up the
  • 00:13:23 distribution directory so the directory
  • 00:13:26 where I want to copy all my transpiled
  • 00:13:29 and prepared and bundled files too so
  • 00:13:32 the directory from which I will actually
  • 00:13:34 serve my app and this should be and here
  • 00:13:37 I will use the path package pause
  • 00:13:39 resolve then does global variable their
  • 00:13:45 name and then dist so that looks a bit
  • 00:13:49 strange but basically what this line
  • 00:13:51 here means is just copy everything which
  • 00:13:55 has been prepared for while serving it
  • 00:13:58 into the dist folder which doesn't exist
  • 00:14:01 yet but will be created automatically
  • 00:14:04 then I'm going to copy that replace this
  • 00:14:07 with source and at the beginning rename
  • 00:14:09 it to dist – – source dear Durr
  • 00:14:14 so the source directory to tell web pack
  • 00:14:17 well you know where to copy it but where
  • 00:14:20 do you actually find the entrance Paul
  • 00:14:22 source code well that is this folder
  • 00:14:24 then but that's time to create another
  • 00:14:29 variable which is called config and
  • 00:14:30 which holds the web pack configuration
  • 00:14:32 here I'll simply set this equal to and
  • 00:14:36 JavaScript object and this javascript
  • 00:14:41 object will actually get exported there
  • 00:14:45 after web pack will then pull in this
  • 00:14:47 object and we'll read it and configure
  • 00:14:51 itself
  • 00:14:52 following the config we set up here the
  • 00:14:54 first thing to setup here is the entry
  • 00:14:57 point to tell web pack which file is the
  • 00:15:01 first file you should start your
  • 00:15:04 transpiling and bundling journey in
  • 00:15:06 because web packs logic is that it has
  • 00:15:10 one or multiple entry files and then it
  • 00:15:13 looks on the dependencies of those files
  • 00:15:16 or the import statements at the top and
  • 00:15:18 pulls in these imports so it builds up a
  • 00:15:22 bundle
  • 00:15:23 adding in some entry point and then
  • 00:15:25 bundling in all the required imports it
  • 00:15:28 automatically also makes sure that they
  • 00:15:31 are all pulled in in the right order and
  • 00:15:34 so on so really clever here I'm going to
  • 00:15:37 use only one entry point and that is
  • 00:15:41 going to be in my source directory and
  • 00:15:43 then a file which I have yet to create
  • 00:15:45 in the app folder the index.js file this
  • 00:15:50 should be my route file because this
  • 00:15:52 will be the file which starts my
  • 00:15:54 application later on I'll also have an
  • 00:15:57 output configuration now this tells
  • 00:16:00 webpack where to output everything we
  • 00:16:03 set up the disco variable of that alone
  • 00:16:05 doesn't tell webpack that this is our
  • 00:16:07 distribution or our target directory the
  • 00:16:09 variable name is totally up to you in
  • 00:16:11 the end so output will be another
  • 00:16:14 channel script object I'll first specify
  • 00:16:17 the path which is in the distractor II
  • 00:16:20 and then in an app folder which will be
  • 00:16:22 traded automatically because remember
  • 00:16:24 I'm talking about each other script code
  • 00:16:26 here and then I'll set up the file name
  • 00:16:29 which be bundled chess because
  • 00:16:32 everything will be bundled and then I
  • 00:16:34 have this public path variable here now
  • 00:16:38 that's important for the web pack
  • 00:16:40 development server because we're putting
  • 00:16:44 everything in the dist folder but on a
  • 00:16:46 real server we would deploy this disk
  • 00:16:49 server so this would be our public
  • 00:16:51 folder now since we have a different set
  • 00:16:54 up here we have a source folder node
  • 00:16:56 modules folder and then the dist folder
  • 00:16:57 we have to tell the web pack server hey
  • 00:17:01 what would be the public server on a
  • 00:17:04 real server server where we only deploy
  • 00:17:06 the dist folder so we can tell it that
  • 00:17:10 the app folder would be the right place
  • 00:17:12 to to look because that will be where
  • 00:17:15 our app lives in with that modules is
  • 00:17:19 the next part in here I defined all the
  • 00:17:21 modules I want to use during my web pack
  • 00:17:25 process with entry output I would
  • 00:17:28 already bundle everything but I would
  • 00:17:30 not transpile es6 to es5 that is what
  • 00:17:33 i'm setting up here in the modules part
  • 00:17:35 you don't have to prove
  • 00:17:36 like modules if you only want to bundle
  • 00:17:38 your code if you don't need to well
  • 00:17:40 compile or change anything if you're
  • 00:17:44 writing when Ella CSS when a lot
  • 00:17:46 JavaScript and so on well then here
  • 00:17:48 there might be no need for modules but
  • 00:17:51 here I will need some I will set up some
  • 00:17:53 loaders I use here and if you want to
  • 00:17:56 learn more about web pack and how to
  • 00:17:57 configure everything definitely have a
  • 00:17:59 look at dedicated tutorials or the
  • 00:18:01 official documentation of course loaders
  • 00:18:04 is an array of Lord loaders and each
  • 00:18:07 loader is defined as a JavaScript object
  • 00:18:09 but here I'm only going to have one
  • 00:18:12 object on only one loader table now a
  • 00:18:16 loader is set up like this we have to
  • 00:18:18 test key which basically tells the web
  • 00:18:21 pack which files should you test or
  • 00:18:25 which file should you have a look at
  • 00:18:27 regarding this loader and since I will
  • 00:18:30 write everything with es6 I want to have
  • 00:18:34 a look at each javascript file now I
  • 00:18:37 will use a regular expression to
  • 00:18:39 identify them so regular expression is
  • 00:18:41 enclosed in two slashes and then a
  • 00:18:44 backslash dot J as question mark means
  • 00:18:48 have a look at all JavaScript files
  • 00:18:52 there after I add the include key which
  • 00:18:59 means which file should you scan for
  • 00:19:02 such files well the source directory of
  • 00:19:05 course then comes the actual loader
  • 00:19:09 which will be the babel loader that's
  • 00:19:13 the package we pulled in via npm and
  • 00:19:16 then i add the query key here which is a
  • 00:19:19 javascript object where i then have some
  • 00:19:22 presets so it might all look strange but
  • 00:19:25 again definitely have a look at the
  • 00:19:27 official documentation to learn more
  • 00:19:28 about that basically here I'm telling it
  • 00:19:30 while the loader is Babel
  • 00:19:32 but Babel in this case also takes some
  • 00:19:35 presets to work correctly and I'm
  • 00:19:37 specifying them here one is the react
  • 00:19:41 preset so presets here basically are
  • 00:19:44 these presets but only now the last part
  • 00:19:48 of the name so
  • 00:19:49 react for example then we also had
  • 00:19:53 es2015 and stage – – that's all that is
  • 00:19:59 the webpack configuration
  • 00:20:02 actually I don't need to pull in a
  • 00:20:04 weapon here at the top by the way so
  • 00:20:06 that is the finished web config file as
  • 00:20:09 it should work and we will see if it
  • 00:20:12 works very soon so with that we're ready
  • 00:20:16 to run web pack but of course we are
  • 00:20:18 missing some things first is the NHS
  • 00:20:22 file we don't have any code so I will
  • 00:20:25 write this soon and we also need some
  • 00:20:28 scripts which you can execute like
  • 00:20:30 appear start some script which actually
  • 00:20:33 starts our web pack process anti
  • 00:20:36 development server so let's continue
  • 00:20:38 with that next I'll start with the
  • 00:20:41 index.js file so I'll go to my app
  • 00:20:44 folder create the index dot J's file in
  • 00:20:47 there and I'm not going to write any
  • 00:20:49 react code here I will just lock
  • 00:20:51 something to the consult
  • 00:20:53 later on see if it works so console.log
  • 00:20:56 it works and then I'm going to go to the
  • 00:20:59 index.html page and here I want to pull
  • 00:21:02 in my script so I'll add script tags
  • 00:21:05 here and then the source and now what
  • 00:21:08 what do you think is the source folder
  • 00:21:12 well you might think that it is app and
  • 00:21:14 then in XJS right because that is where
  • 00:21:17 your file lives but keep in mind
  • 00:21:19 everything will be bundled and moved to
  • 00:21:21 the dist folder later on so we actually
  • 00:21:24 have to import it from slash app slash
  • 00:21:27 bundle dot j s because remember that is
  • 00:21:31 what we set up at your web peg file
  • 00:21:32 everything will be moved to D dist
  • 00:21:34 folder then to the slash app folder and
  • 00:21:36 then it will be named bundle cheese
  • 00:21:38 so dist folder will be the public folder
  • 00:21:41 later on and the app path well will be
  • 00:21:45 where our app will live
  • 00:21:48 therefore app bundle J s with that we're
  • 00:21:51 almost there now we only need some way
  • 00:21:54 to trigger all those webpack copulation
  • 00:21:57 and
  • 00:21:58 so on so I will go to the package.json
  • 00:22:00 file and we have this test script which
  • 00:22:03 I don't really need so I'm going to get
  • 00:22:06 rid of that and I'm going to create my
  • 00:22:08 own script start which is a default
  • 00:22:11 keyword by the way which allows you to
  • 00:22:14 just run NPM start and then execute
  • 00:22:16 something well what you want to execute
  • 00:22:19 and I will well wait a second for
  • 00:22:23 setting up this script I will first
  • 00:22:25 create another one which are name build
  • 00:22:27 and get an oops and yet a number one
  • 00:22:32 build prod so a production build that is
  • 00:22:36 how you create scripts and NPM and then
  • 00:22:38 you can run them and I will also show
  • 00:22:40 you how to run them so let's start with
  • 00:22:42 NPM build which should be our
  • 00:22:44 development build process and what's the
  • 00:22:46 difference well in protection we don't
  • 00:22:48 want to have source Maps we want to
  • 00:22:50 minify everything and so on
  • 00:22:51 so let's start with the development
  • 00:22:54 build all call webpack – d and this is
  • 00:23:01 all i need to do that will execute
  • 00:23:03 webpack this again is d2 will be pulled
  • 00:23:06 in in via NPM and it will automatically
  • 00:23:10 find the config file since we named it
  • 00:23:13 web pack convict oj s – t then tells it
  • 00:23:17 to run in development mode that would
  • 00:23:21 already transpile our code and
  • 00:23:23 everything but we're not done yet I also
  • 00:23:26 need to copy my index.html file because
  • 00:23:28 that also needs to be in the this folder
  • 00:23:32 now I could use webpack for that but I
  • 00:23:34 can also use NPM for dad just use the
  • 00:23:38 copy command that's a default system
  • 00:23:41 command here CP on Windows by the way
  • 00:23:44 that would be copy and then I'm telling
  • 00:23:46 it to copy the index.html file here to
  • 00:23:51 the dist
  • 00:23:52 index.html file so basically copy to the
  • 00:23:55 dist folder that's what I'm telling it
  • 00:23:57 here with that all the files are
  • 00:23:59 prepared now it's time to run the web
  • 00:24:01 pack dev server with this command here
  • 00:24:03 and I need to configure it a bit I have
  • 00:24:06 to put content base here and set this
  • 00:24:11 source the app tells the server that our
  • 00:24:15 well content basically comes from the
  • 00:24:18 source folder which is only important
  • 00:24:20 here for our development server right
  • 00:24:22 then I'll add the inline command just
  • 00:24:25 change the way the server runs or
  • 00:24:28 displays everything and you may add – –
  • 00:24:31 hot for hot reloading to be honest I
  • 00:24:33 always have problems with that
  • 00:24:35 well you can't try it of course and that
  • 00:24:38 should be everything we need of that
  • 00:24:40 it's time to come to the production
  • 00:24:42 environment well in this environment I
  • 00:24:45 basically you will do almost the same
  • 00:24:48 copy all that stuff here until we copied
  • 00:24:51 the HTML file copy that all in here but
  • 00:24:55 change web type – D – minus P which will
  • 00:24:59 remove source Maps minify everything and
  • 00:25:01 so on with that what should NPM start do
  • 00:25:05 well I should just run the bold script
  • 00:25:08 NPM run build and of course I could MP
  • 00:25:11 rambled in my terminal or console but
  • 00:25:14 since NPM start is shorter than NPM run
  • 00:25:17 both I'm giving me this shortcut here so
  • 00:25:20 with that I'll go to the command line
  • 00:25:22 and run NPM start and that looks good no
  • 00:25:27 errors and if you scroll up write it
  • 00:25:31 begin you see that everything is served
  • 00:25:33 from localhost 8080 that's default web
  • 00:25:36 page uses and you can override it by
  • 00:25:39 adding – – port and then your desired
  • 00:25:43 port number but I'll leave it at the
  • 00:25:46 default of 8080 so let's head over there
  • 00:25:49 localhost 8080 and let's see if we see
  • 00:25:53 it works in the command line let's
  • 00:25:56 reload this it works so that was quite a
  • 00:26:00 lot of work I know rather long video but
  • 00:26:03 I wanted to step through that step by
  • 00:26:06 step I hope you're all still awake and
  • 00:26:08 you got a working development
  • 00:26:10 environment now with that we're ready to
  • 00:26:13 get started with react Jas