Some applications
or some projects require a build step.
That simply means that we run code in development
which is not to code we're going to deploy later
because it might need to be transformed or optimized.
And this is typically the case
if we build web applications that run in the browser.
So if we are working with code JavaScript code
that runs in the browser,
for example in our React application.
There, we have differences between our development
and our production setup.
They are not equal.
And we won't be able to fix this with Docker alone
because it's inherent to this kind of project.
Let me give you an example.
Our front end here is a React application.
Other popular web frameworks would be Angular or Vue
and they all have in common
that we use them to build websites
where the majority of work is done in the browser
with browser site JavaScript code.
Now for building these front end web applications
we typically use Syntax
which isn't support just like that in the browser.
For example, in React, even if you don't know React
I can tell you that we got JavaScript files
which have some HTML mixed into them.
This syntax is called JSX
and it was basically introduced by React
and it's not running like this in the browser
instead, this is code, which is transformed
compiled you could say, by some script
which runs in the background during development
to code which is executable by the browser.
This is just code, which we write during development
since it's easier for us to write
then the code to which it will be compiled.
Now the browser, again, just to make this really clear
won't run this code, it's transformed.
And this transformation happens
behind the scenes during development
when we run this NPM start script
this start script here, which we do execute locally.
It is defined in our Docker file
that we start this container with NPM start.
This NPM start script uses a third party package
that reacts-scripts package
which then has a start script as it seems,
which in the end will compile, transform
this code to browser friendly code.
And it will not just do that,
it will also transform other code
it will optimize the code,
shrink it to make it as small as possible
and do a bunch of other things.
In addition, this start script here,
whoops, this hear
this start script here also starts
a so-called development server.
Which is a basic web server
that serves this front end application.
Because this front end application
is really just that, it's a web application
which is meant to be executed in the browser.
Now to reach the browser,
it needs to be served by a server
and this front end folder
contains no, server side code.
Therefore it brings its own mini development web server
which in the end just serves this index HTML file
in the public folder, which then in turn
imports, this transform to JavaScript code.
That's how this project works.
And that's how all these front end
web app projects typically work.
No matter if you're building them with React,
Angular or Vue.
And therefore in projects like this,
we can't just take this development container
and move it to production.
Because this development server
started by NPM start is not meant to run in production.
It's not optimized for that
and also this entire file compilation process
would use way too many resources
and would be way too slow to be used in production.
It's really just meant to be used during development.
Now for production, this React project
and all similar projects do that as well
brings its own build script
which we can run instead of start.
Build will not start any server
but it will do this code compilation and optimization
and spit out these transformed and optimized files
so that we can then serve them ourselves
with help of any web server of our choice.
So we then get the files, but not the server.
And that's the issue we'll have here.
This start script gives us a running server
but it's not great for production.
This built script
at least gives us the finished JavaScript code
but it doesn't give us a server.
So just running built in a Docker file
as a final command, won't be the solution
because this will just generate a bunch of files,
but not start any process that would be reachable
by a HTTP request.
And there for we'll have to find a way
of building a Docker file
which actually can be used to build a container
that runs this application in production.