To create our own workflow I'm in a brand new folder,
it's an empty folder,
the only thing I have and here is the gitignore file since I'll be using git, just ignoring node modules
where we'll soon store all our dependencies,
a mac specific folder and the dist folder which I'll later use to spit out the build project.
This is optional,
you don't have to use git.
Now the first thing is that we want to use npm to manage our dependencies, so to manage all the files
and the tools we need to set up a working workflow. For that we need to put this project under control
of npm which we do by running npm init, you would simply run this in the terminal, navigate it into this
empty folder,
you'll then be asked a couple of questions.
you can simply hit enter on all of these or adjust them to your needs,
I'll quickly walk through them,
at the end you will be asked if everything is okay and you can hit yes. With that,
you'll see that the package.json file was added,
this is the file which we'll use to set up our build scripts and to also the manage the dependencies of our
project.
Speaking of that let's install the first import dependency,
actually two of them with npm install --save-dev,
we install new dependencies and we mark them as development only dependencies
which doesn't really have a big impact
here, doesn't make a difference, we could also use --save in our project but it makes it clear
which dependencies we use only for setting up the build workflow and which dependencies really have
an impact on the running application,
you will see that they will be grouped differently the package.json file later.
Both --save and --save-dev add an entry to package.json so that we can
easily share our project without having to share the big node modules folder too.
Enough talking about that though,
let's specify the two dependencies we need.
The first one is webpack and the second one is webpack-dev-server, like this,
the second one is this development server we want to use so that we can test our application locally
on the machine and webpack is well
basically the build tool itself, webpack-dev-server wraps this build tool,
they're both from the same team.
Let's now hit enter to download these packages and create a node modules folder where they are stored
and you will also see that entries are added to the package.json file, I'll be back once this is
done. So the installation did finish and you see that we have the new dev dependencies node in the package.json
file.
This is what I meant,
we can now share this project without node modules as all the source code downloads in this course are
and everyone taking this project can just run npm install so that all the dependencies listed in dev
dependencies or dependencies, the normal dependencies get installed and the node modules folder gets recreated.
In the node modules folder,
we see a bunch of dependencies not just webpack and webpack-dev-server, that simply is because web
pack and webpack-dev-server have their own dependencies which they also installed
but here you can see webpack and webpack-dev-server. So with that, we can use these dependencies and we will
do so over the next lectures,
a good place to start though is to not start working on the workflow but let's first set up a basic
folder structure and a basic react app so that we know in which environment we want to work and that
we can adjust the webpack configuration to that environment.
Let's do that in the next lecture.