- [Instructor] Okay, welcome back! In this demonstration, we're going to do our first proper code build.

We're going to use Jenkins. We're going to use a freestyle project. And what we're going to do is we're going to build the code that's located at this Cloud Academy GitHub repository. Now, this is a good starter project. It's based on React. Those unfamiliar with React, React is a JavaScript library framework provided by Facebook, and it's really great for building component based user interfaces. Now, the reason we're going to use React is twofold. Firstly, it's a good starting point to get introduced to building source code. And secondly, it demonstrates that Jenkins can be used to not only compile source code, in the sense of compiling Java or compiling C sharp or compiling C++, Jenkins can do a lot more. In fact, it can do any arbitrary build task that you require it to do.

So let's quickly take a look at one of the source files in our React web app project. So, in this case we'll navigate to the App.js file. Now, because we're using React, this isn't pure JavaScript, and the key point of this is that if we send this file as is to the browser, then it's not going to run because browsers are designed to pause JavaScript. And when you're developing with React, you're writing both JavaScript and HTML together. So if you have a look here, we've got a class statement, and within that class statement, we have a render function. So that looks like typical JavaScript, but if you look closer, you'll actually see that there is HTML involved, as well. So, the key point of this, in terms of what we're going to do with Jenkins, is we're going to have to use Jenkins to convert it from JSX into pure JavaScript.

The technical name for this process is transpilation, and we're going to use Jenkins to actually perform that process. So let's jump into Jenkins and begin our setup. So we log in with our credentials. We click on New Item. We're going to call it BuildJob3. It's going to be a freestyle project again. Click OK. We specify that it's a GitHub project. So, here we copy our GitHub URL. Scroll down. Under Source Code Management, we'll select Git, and again, we specify the repository URL. This time we append .git to the end of it. Then we scroll down to the Build section. Click on Add build step, and we use the Execute shell. And here we're going to run yarn install to install our JavaScript library dependencies, followed by yarn build to do the actual transpilation of our JSX to pure JavaScript.

We'll do a directory listing, and we'll echo out finished to indicate that we're all done. Click Apply, click Save, and we'll click Build Now. So, this schedules the build. The build is off and running. We can click on it to navigate into the console output. I can see here that our first command is running, yarn install. It's resolving and fetching the third party library dependencies for our JavaScript application. It's now performing the actual transpilation. And we've done our directory listing. And we can see that, indeed, everything has finished as per our finished statement. Now, after the transpilation occurred, a build photo was created for us. So our React web app that we can actually serve up is now contained in this build directory.

So again, if we jump back into the terminal, let's navigate to var/lib/jenkins. Do a directory listing. We see here that we have a workspace folder. We'll navigate into there. Again, we do a directory listing. We can see here that we've got individual folders for each of our build jobs. So, we'll navigate into BuildJob3, do another directory listing, and here you can see that when the build ran, it did a Git clone of our repository. If we navigate into the build directory, and we do a directory listing, here we can see the files that have been transpiled. These are the outputs. And if we take these files, and we serve them up, and we navigate to index.html, we'll see our React web app. We'll jump back to the Jenkins web console.

We'll navigate up to the project. And this time we'll click on Workspace. So, the workspace view within Jenkins is the same view that we just had a look at on the file system. If we look in the build directory, again, we see our files that are used at serve time. Now, if we click on the all files in zip, we'll actually download a copy of that to our workstation. So, if we jump over into our terminal again, we'll start another session. And this time if we navigate to our Downloads folder, we'll now unzip the build.zip file that we downloaded, navigate into it and do Control + L.

If we start up a utility called http-server, this is a simple web server that basically serves up the current directory. If we navigate to the 127.0.0.1:8080 link, you'll see that our web app is up and running. So, this is showing that Jenkins has been used to do the transpilation and the minification of our web files. Okay, so in summary, all we've done is we've created a freestyle project, pointed it at our React sample web app hosted on GitHub, and then we used Jenkins to do the transpilation as well as the minification of our web assets.