In the previous lecture, we were developing our game in Truffle. We adapted Truffle in order to have our smart contracts in their migration scripts in our test cases. Now, this is only the Truffle part, if you want to add a beautiful UI on top, you have to go with HTML JavaScript, or any other language that you want. But we are sticking with HTML JavaScript in our course here. And to have HTML JavaScript in a truffle integrated, there are a couple of ways to do that. Truffle itself is actually just the contract management tool, but because it's just Node.js and Node.js comes with a lot of packages perfectly suited for web developers, it is a normal way or it became a standard way to integrate your HTML UI already in your Truffle project. And instead of reinventing the wheel every time, instead of adding in something like Webpack, Browserify, maybe power, if you come from the power side, maybe add some single page application frameworks like Angular or React. You can start with a boilerplate and Truffle has a lot of boilerplates and they call it Truffle Boxes. And I've opened the website here for the Truffle Boxes, you can find them on truffleframework.com/boxes  or if you go to the Truffle framework website over here on the top corner, you see the Boxes link. What you end up with is an in formational site and a lot of boxes over here which tell you exactly nothing the first time you open them. They are specifically made for a certain purpose. So, for example, if you want to start with React then you can just take the Truffle react box. If you want to start with a metacoin example that you maybe see through the docs in the truffle framework, then you start with the metacoin box. We are going to work with what is called a webpack box. And when you open this box, open it in the background with the middle mouse button, then you see an installation description. And if you run truffle unbox webpack on your machine, on your terminal, then it will download this box. What is a box? A box is nothing else than a GitHub directory. Usually, you find the GitHub link here. And inside this GitHub directory, there is a truffle box JSON file  that instructs Truffle to run certain commands after it downloaded this repository. So, when you type in truffle unbox webpack, then it will look in the truffle boxes directory for the webpack GitHub repository. It will clone this GitHub repository and it will look into the truffle box JSON file  for this post-unpack hook and then do whatever is in there. You could do the very same manually as well. So, you can just get cloned this whole repository and then run CD app and then npm install it, would have the same effect. But with Truffle you have a nice way of doing that without the hassle of looking into this configuration file. So, if we want to do that, I'm going back in my visuals to the occult here and I'm going to open a new terminal and let me create a new directory. So, we are working in the right directory, new folder and I'm calling this, SO5 - Our Game with HTML. I'm going to SO5 - Our Game with HTML, and now I'm typing in truffle unbox webpack. And what happens next is it's preparing to download, getting the right directory, downloading, and then setting up the box. And the reason why setting up the box might take a little bit is because in the app folder, this node modules folder, this npm install, which is going into this package.json file, looking through the dependencies, the devDependencies and the dependencies, and then installing them in the node modules folder might take a little bit and it's not showing you the output, it's just hiding the output of npm install in the background. And then when it's done, it says, unbox successful. Sweet. And gives you the commands. And the commands are, on the top  you see the truffle commands, truffle compile, compile the smart contracts in the contracts folder, truffle migrate to migrate to deploy the smart contracts, and truffle test.

So, we've worked with those commands already and on top of that, you see around dev server and build for production. And because our, the smart contracts usually are, they're just the logic behind an actual UI version of your app, of your distributed application of your dev. So, the UI view layer is here in the app folder and that's just JavaScript. So, that's really just the plain JavaScript and if you unbox this webpack project, then you get a demo project. And this demo project comes with the so-called metacoin smart contract. And this metacoin smart contract is rather simple. So, that's all here that you see here and what it does is, the one that deploys this metacoin smart contracts gets 10,000 coins. So, it's basically a mapping that where 10,000 is assigned to the message sender and you can send coins around to other addresses. So, it just make sure that you have enough coins in your balances and then deducts the balance from you as the balance to the other one and emits an event. And it comes fully loaded with the test cases and with a UI. And this UI is really here in the app source index.html and the JavaScript. So, there is some UI. And the good thing about this webpack project, it comes with a webpack, and Webpack is a no as tool, which makes it very easy for you as a web developer to get a dev server up and running and have some functionality which makes it easy to work with libraries. Let me explain this to you. If you go to the index.js file then you see these import statements, import Web3 from "web3"', import metaCoinArtifact from and so on. These import statements in JavaScript, they don't work natively. They are just working in Node.js style. So, if you open this index.js file with your browser, with chrome, or with firefox, I couldn't do anything with this import statement. But if you run it through webpack then webpack will go in there and will look very much like no chairs in this node_modules folder for the right package. So, it will take the web 3 package from this node_modules folder, and I have to scroll down a little bit because it's a very, very large folder. Let me scroll down. So, it will go into this web 3 here and then take the dependencies from here and take the dependencies from this file, require the web3-core, import those and those and those until they all, the whole dependency 3 is resolved. And then put all of that into the index. Where is it? Into the index.js file. Let me run the webpack dev server and let's run it together with you and show you how that looks like. So, you go to the app folder and you do npm run dev. So, why does npm know what to run with the dev command? In the package.json file in your app folder, there is a scripts, item and inside there it says the dev. If you run the script dev. So, npm, no package manager run a script called dev  then it will start the webpack-dev-server. So, this is why inside here it will run the webpack-dev-server. And it already can say it can't resolve the MetaCoin.json file and the reason why it cannot resolve this is because we haven't really deployed this. So, let me just terminate this job with control C or command C on the Mac. I go to the truffle conflict, I have a look if there is the development network uncommented, which you have to do in order to migrate something. So, that was from the previous section. Our truffle conflict must have the right development or must have the right network and then we are doing a truffle migrate but we have to first start a ganache, ganache-cli. So, we have a database up and running, and let me close this here. So, we truffle migrate. Truffle migrate, will deploy, will compile the smart contracts, and deploy them onto the blockchain here in the network step. And then place them into the contract, into the build contracts folder with the artifacts as JSON files. And then inside our index.js, we have to, we can access these JSON files  and then do something with that. So, if we start the webpack-dev-server now then it should work just fine. And give you the project which is then compiled, compiling, in this case, means that just these all the imports are resolved. So, we go here and we can go to localhost : 8080. Let me go to localhost : 8080 here and you will see that something is already happening. You should see something very similar to this one where it says MetaCoin and then you have some meta or not. If you have MetaMask installed like I have, you probably don't if you are just starting off with Solidity and Ethereum development but if you have then start an incognito or private, private window and load localhost : 8080. And that one will deactivate any plug-ins and will also just load the page. We're talking in a second about how to connect to block channels, if they are not running by a MetaMask or if you have a direct connection. Good. If you inspect, if you view the page source then you just see the normal page source but if you are going to the web developer tools which is F-12 or command shift I, or here in the options window under more tools you find the developer tools then a little window should pop-up. And it should give you, if you go to the sources, to the index.js. The very large and compressed sources which is very hard to read. So, before we go on with our development in this truffle box, before we are going to change how the HTML looks like, I want to put this into a form which makes it easier to read. Go back to your project, go and find in the app folder the webpack.config.js and change first of all the compress from true to false, and then add a new key here which is called mode : development. So, make sure after the dev server or inside the dev server, change the compress to false and the mode to development. Save this, stop the webpack-dev-server and restart the webpack-dev-server.

This will have two effects, first of all, it will be much faster, and second of all, if you develop something it will be much easier to read. So, if you have a look now, you have all the source here uncompressed and in a way that it's easier to read. So, if something happens for example, here there is an error connection refused, couldn't connect to the contract, then you can just click on it and it will give you around the area where this happened. So, over here, for example, we have our EventListener load and we could to make this work go into the index.js and scroll to the bottom and change our HttpProvider to 8545. And you see when I saved this our webpack automatically reloads the base. So I don't have to reload our webpack server, it's called hot reload. And when I go back to my browser then I also don't have to reload anything. It is just reloading the page and only those parts of the page that really need reloading, it's also called hot reload. If you never worked with it, it's a little bit like magic. If you've worked with it, you never want to give this up anymore. So we want to stop here at this point. That is enough truffle boxes introduction. If you want to start off and follow along with this course, then truffle unbox webpack change the webpack.config.js file to add the compress false and the node development. And have a look if you can connect to your ganache by changing in the index.js on the very bottom here, the port where it says localhost 9545 changes to 8545. And you're good to go. That's it. I'll see you in the next lecture. But we are going to adapt this box from MetaCoin to our game.