Press "Enter" to skip to content

Build a Modern JS Project – #2 What is a Build Process? (CI/CD)


and before we get into coding let’s
first talk about the qualities of a
successful modern project so one of the
characteristics would definitely be
version control so this will be
something like get using github or
bitbucket or get loud
a project will often also have an
automated CI CD pipeline and that
basically means that the releases and
deployments in the project will be
automated there will also be a heavy
focus on cold quality and of course this
is gonna bring us to the tooling section
and this is all about using modern tools
like eslint and prettier to make our
code base solid and maintainable we
would also want to enable a wide module
support so not only the common J’s
syntax that is prevalent among anthea
modules but also support for es modules
which are popular in the front end
projects especially besides that we also
want to make sure to document the API
that the library or project exposes and
finally we probably also want to show if
you sample demos that people can
actually follow in order to set up the
project on their own now I’ve already
mentioned an automated CI CD pipeline so
let’s actually talk about that aspect in
more detail now a successful project
will often have a build process so what
I build process is is it’s essentially
an automated sequence of tasks that are
going to run on every push it tag and/or
release so every time you push your coda
to the repo or you tag your code on
github or you creating your release and
you push it there’s going to be a
sequence of tasks that are going to run
in response to that action and
oftentimes there’s going to be a set of
stages that your code is going to go
through the first thing that’s going to
happen is there’s gonna be an install
stage so we’re going to install all the
dependencies we’re then going to all
enter the code we’re also going to run
the test suite and the project we’re
then going to build it we’re going to
push it to the repo and finally we might
also want to deploy it to a host now
every stage is also going to have a set
of associated jobs in it so for example
during the install stage we will most
often do a clean install using NPM CI
this will also implicitly do a security
audit with NPM audits and then after the
install stage we’re going to have a one
stage and this is one we’re gonna run
the Ale winter so for example excellent
or silent and also a formatter like
prettier now after the Yulin stage we’ll
have a test stage and like I said this
is where we’re going to run the test
suites which might be Ronnie using the
Jazz framework or
or Ava oftentimes we will also generate
a code coverage for the test suite so
for example this could be something like
NYC and we might also then push that to
code cub or coveralls
now after that there’s going to be a
build stage and now this is when we’re
going to transpile the code now
oftentimes this is going to be Babel but
this might also be typescript or flow we
might also have to pre-process some of
our assets so this will include
compiling or the prefixing things like
that so this will often target the sass
files the less files or even post CSS
after that we might want to uglify the
assets so this will include minifying
mingling and optimizing the assets so we
might as well be using something like
uglify GS or tercer now after that we’re
gonna be bumming our files so this will
concatenate all the files this will also
oftentimes apply tree shaking to our
JavaScript code and oftentimes this is
done using a bundler like web pack or
roll-up or parcel then we might want to
compress the files using a format like a
zip and of course besides that we might
also want to do a bunch of other tasks
like copying and deleting or moving
files we might also want to check the
bundle size to make sure that it doesn’t
exceed a set limit or we might also want
to know strip some of the unused code so
for example typescript or flow
definitions or something like prop types
in react for example now after that
there’s going to be a push stage now
this is where we might release our code
to github and we might also want to
publish it to NPM or any other registry
and finally we might have a deploy stage
now this one is optional but it might
trigger a deployment to a hosts for
example Heroku or Serge or github pages
or any other host no surprise running
the jobs and actually executing the
tasks in aged stage we might have to use
the CLI so in this case this would
involve using the NPM CLI or we might
also use a task runner and this was
popular back in the days so for example
people were using grunt or gulp or
something like brunch which is even
older these days the CLI option is the
more popular one so you’d often see
scripts section in a package.json file
and this is where you list all of the
scripts that you want to run as part of your build process

Please follow and like us: