All language subtitles for 004 Building The Code For Production_en

So, now we optimized our code

maybe with React Memo, but especially

as shown in the last lecture with lazy loading

now we can build our app for production.

And with that, I mean that we can run a script

which will take all our code, convert it

to JavaScript code that the browser understands

and code that is as small and bundled up as possible.

Now, for this, we need to go back

to our application and we can take

a look at the packaged JSON file.

Here, we've got a couple of scripts,

which are baked into this project setup.

And thus far, we always used NPM start.

This also runs a script under the hood,

but it runs a script which does transform our code

so that it runs in the browser,

but it does not optimize the code yet.

And it does spin up a development server,

which hosts this development code.

Now for production, we want to run the build command.

This will also transform our code,

but optimize and shrink it as much as possible.

And it will not start a server.

So hence here, I'll quit this development process

and now we can run npm run build.

That's how you run this build script, npm run build.

Now, this will build that production output,

as it says down there, and it can take

a couple of seconds until it it's done.

So, let's wait for that.

Here we go, now we're done.

It also shows us how we could install a basic server

to preview this production app on our local machine

because it doesn't start a server automatically anymore

for this command but, at the moment, we can ignore this.

If we scroll up a bit further, we also see what it did

and it shows us which files it generated.

And we can find all those files

in a newly added build folder.

Now, this is a super important folder.

The build folder or, to be precise,

the content of this build folder

holds all the code you need to deploy in the end.

This is the code, or these are the files,

which you need to move onto your server later,

so that your application runs there.

Now, you should never change the code

in this build folder because the files

in there will be overwritten automatically

whenever you rerun npm run build.

Instead, change your code in the source folder,

and maybe also in the public folder.

Here, you can add your own favicon, for example,

or change your robots.txt file for search engine crawlers.

I will go with the defaults there

and, hence, now this is the build folder content

that we will move onto a real server in the next lecture.

Now, before we go there, I want to highlight

that it's the static folder in the build folder

that contains your optimized CSS code.

And, most importantly, the optimized

and browser ready, JavaScript code.

Here, we see all the JavaScript code we wrote

just translated and optimized.

And, of course, it's highly unreadable,

but it is the code we wrote in the end,

as we can tell by the CSS classes

we see in there, for example.

So, now, that's the content which we want to deploy.

And that, of course, brings up one important question,

how do we get this code onto a server

and which kind of server do we need?