All right. 1
So now that we've seen how we can build a Dapp using JavaScript, CSS and HTML, now it's time to spice 2
up our front end and be able to build an application on the ICP with an actual proper React frontend. 3
In the previous modules, we've talked a lot about React and we learned how to use it, how to build 4
modern applications using this fully featured frontend framework. 5
Now as you know, most of the websites these days are built using React as the frontend and the benefits 6
are many. 7
But the most important is that it allows us to add lots of features, lots of components very easily, 8
and be able to create a really modern-looking, beautiful frontend for our web applications. 9
And today most of the web3 applications are built using a React frontend as well. 10
So when we're building these decentralized apps, we're definitely not limited to just using plain 11
CSS and HTML. 12
So what we're going to be doing in this module is we're going to be taking that Keeper app which we 13
built using React in the React module of the course where you built it completely from scratch. 14
And essentially it mimics the Google Keep functionality. 15
So you can take some notes, you can add a title and go ahead and add it to your Google keep or your 16
keeper in this case. 17
And whenever you have an idea, whenever you want to jot down something, you can use the keeper app 18
to do that. Now because we built it using just React, 19
so we basically only had the front end for this application without a backend or database, 20
that means this application, when you refresh it, everything disappears and gets reset to the beginning, 21
which is not great if you actually want to be able to keep hold of your notes, right? 22
So in this module we're going to be adding an ICP backend and data persistance and storage for this 23
application to make it fully featured and also decentralized on the Internet computer blockchain. 24
Now there's quite a few steps involved in actually getting our ICP app to be able to use React. 25
So I'm going to show you step by step how to do it 26
and it'd be great if you could watch me do it and then pause the video and then do it yourself and then 27
keep going because there's quite a few steps and if you miss any of them, then it might not work properly. 28
To get started, 29
the first thing we're going to do is we're going to create a new ICP application, just as we did before. 30
So we're going to cd into, in my case it's called ic-projects and here we're going to create our 31
new dfx project. 32
So we're going to say dfx new and then we're going to give it a name. 33
So in this case I'm going to call our new project dkeeper, and I recommend calling yours the same 34
name so that later on we don't get confused when we have to use this name. 35
I know it's not the best of names, but we're just going to bear with us. 36
But let's just go with it for now. 37
Hit enter and it should behind the scenes, create everything that's required for this project. 38
And you've done this before, so there's nothing new here. 39
And once you see the dfinity logo, then you are done. 40
So it's created it in there. 41
And if we just do a quick ls, you can see there it is right there, dkeeper. 42
Now, let's go ahead and open that inside VSCode. 43
So go ahead and open up code and then file, open. 44
And we're going to locate our ic-project, find our new dkeeper application and open it inside VSCode. 45
Now, this is a brand new templated ICP application, and we're going to have to do a few things to 46
modify it so that it can actually run our React application. 47
So we're going to go ahead and expand this folder called source. 48
And then inside here, there's dkeeper, which is where we have our main Motoko file. 49
You don't have to modify that right now, but inside the dkeeper assets, you've got the assets 50
and the source. 51
So we're going to be replacing the CSS file and also the index.html and index.js. 52
So I want you to go ahead and just delete these three files for now. 53
So right click and delete. 54
So now that we've deleted those files, we're going to have to replace them with the files from our 55
dkeeper. In the course resources 56
you'll see a link to the finished Keeper project and if you're not familiar with React or this project, 57
I recommend you to actually complete the React module before you continue, because I'm going to 58
be assuming that you've actually learned and gone through that module that you're fully on board with 59
how React works. 60
So once you're here, then you can go ahead and click this down arrow to export all the files here as 61
a zip file. 62
Then go ahead and extract the zip file and open up that folder. 63
Now you'll see inside the public folder there's the index.html and the styles.css. 64
And then in the source folder we've got our components and index.js. Now coming back to our Visual Studio, 65
we're going to move some of these over. 66
So we're going to move our index.html into the source folder and our components and index.js also 67
goes into the source folder. 68
Now finally, the styles.css goes into the assets folder and now we've basically moved our entire 69
React frontend over to our dkeeper project. 70
So we've created a new ICP project on the command line, we've downloaded our files, we dragged them 71
into place and now we have to go ahead and update some of these files and change some of the contents. 72
Now one of the first things we have to do is we have to rename the extension for the index.js 73
for it to play nice with the webpack and how we're going to load our application. 74
We have to rename it so that instead of index.js we have index.jsx and this is a common extension 75
that you see with React components and also React websites, because as soon as I add the extension, 76
you can see that even VSCode knows that I'm using React for it. 77
Now once you've done that, we're going to go into the webpack.config.js. 78
We're going to modify a few things so that it will allow us to have the React frontend. 79
Now if you scroll down, you can see here on the first sort of comment section here in the module.export 80
entry, you can see that it's pointing to the JS file, which is our original index.js. 81
So we have to modify this as well now that we've renamed it, 82
and we're just going to add an 'x' right here. 83
So that becomes .jsx. 84
So we've renamed index.js to index.jsx and we've changed this line, line 51 on the webpack. 85
config.js into .jsx. 86
Now the line number might be different for you because you're doing this in the future, 87
so this file might change. But if you just scroll down and find this module.exports target web 88
and then in the entry section, that's the part you need to change. 89
Okay. 90
So now that we've changed that, there's a few more things we have to do. Scrolling down 91
you can see that there's a comment section here where it says if you're using React, then we should 92
uncomment this section. 93
So that's exactly what we're going to do. 94
So it's command+/ on Mac and control+/ on Windows so that we actually use the 95
typescript loader, which is going to happen behind the scenes in order to run and load our application. 96
So now that we're done with the webpack.config, let's go ahead and hit save to save those changes and 97
then we're going to add the ts or TypeScript config file. 98
So in the course resources, you'll be able to download a file called tsonfig. 99
json. 100
And once you've downloaded it, I want you to just go ahead and drag it into this dkeeper project. 101
So just go ahead and put it somewhere below the webpack.config. 102
js and you'll see that this just has some config for compiling our code specifying which versions 103
of JavaScript we're using, 104
and it's just a bunch of configurations so that we can actually run our frontend. 105
Now the final thing we have to do before we run our frontend is to go into the package.json, go ahead 106
and delete everything. And then again in the course resources there is a download for something called 107
package.txt. 108
And if you go ahead and open this package.txt, you can copy all of it and paste it into the package. 109
json so that we add the dependencies that we need for this project. 110
So now let's hit save and we are finally ready to actually test out our frontend and see if it actually works 111
on local host. 112
So let's open up a new terminal and let's use our dfx start to start the simulated local ICP blockchain. 113
And then once that's done, let's go ahead and open up another panel of our terminal and we're going 114
to do npm install and this is going to install the required dependencies that we've 115
specified in the package.json. 116
And if we go ahead and hit enter, it should take a little while and do that for us. 117
And once that's done, you can ignore some of these warnings. 118
It's just a couple of deprecations. 119
Some of the libraries that we were using creating dKeeper, have been deprecated and there are 120
newer versions. 121
But it's okay because our project works fine as it is, and if we try to upgrade things, it has its 122
own dependencies and you'll get into a bit of a hairball. 123
So we're just going to keep it as it is. 124
And because all it is is just the icons, it's not going to affect your project. 125
So don't worry too much about those warnings. 126
Now, once we've installed all of those things, we can finally go ahead and do dfx deploy and 127
deploy our cannisters onto the simulated ICP network. 128
Now, finally, when your canisters have been deployed, you can go ahead and run npm start and now 129
we can go to our browser and go to our localhost 8080, and you can see the front end of our React 130
application is now up and running. 131
Now this has no backend and it's got no sort of Motoko code or nothing really that we've done for 132
it on the ICP side. 133
But it's just to prove that our frontend has actually been linked up correctly and that we can actually 134
get it hosted locally. 135
So if we add, you can see these get added, and you can see our icons look fine and everything is working. 136
But again, if you hit refresh, everything gets deleted because there is no backend there and there 137
is no storage. 138
So in the next lesson, we're going to be tackling some of those things and we're going to be linking 139
this up with our main.mo so that we can actually persist the data that the user type in here and 140
store their data on the internet computer blockchain. 141
So for all of that and more, I'll see you on the next lesson.