How to configure a DFX project to use a React Frontend?

Prerequisites

I would highly recommend you go ahead and fork the following Google Keep project from the Codesandbox playground:

Then export the newly forked sandbox to your local directory like so:

Getting started

Before you start working with dfx projects, see the following documentation available online:

• Quick Start

• SDK Installation

• Motoko Programming Language Guide

• Motoko Language Quick Reference

• JavaScript API Reference

Setting up your react project

If you want to start working on your project right away, you might want to try the following commands from your Ubuntu terminal:

mkdir react-projects

Change directory into that folder using the command:

cd react-projects

Inside this react-projects folder, we’re going to create our first Internet Computer DApp using the following command:

dfx new dkeeper

You should now see the Dfinity logo like so:

You can see this new project and folders by running the following command within the terminal:

explorer.exe .

Now we can open up VSCode and see our brand new templated ICP DApps. It should open like this:

Then you can go ahead and replace the following files with the files from your Google Keep project like so:

DKEEPER [wsl: Ubuntu]
|- /src
    |- declarations
    |- dkeeper
    |- dkeeper_assets
       |- styles.css (1)
    |- src
       |- index.html (2)
       |- index.jsx  (3)
       |- components (4)

Your src folder should now look like this:

Note 💡 - Remember to change the extension for our index.js file to index.jsx so that it works in-line with our webpack.config.js.

Modifying our Webpack Configuration

Cool! Now we have to configure our webpack.config.js entry point at line 51 so that it points to our renamed index.jsx file.

If you are using React then you should uncomment the following lines:

Creating our TsConfig Configuration

Then we will create a new file called tsconfig.json right above our webpack.config.js:

{
  "compilerOptions": {
    "target": "es2018",        /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "lib": ["ES2018", "DOM"],  /* Specify library files to be included in the compilation. */
    "allowJs": true,           /* Allow javascript files to be compiled. */
    "jsx": "react",            /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
  },
  "include": ["src/**/*"],
}

Now you should go inside your package.json file and import the following dependencies for our project:

{
  "name": "dkeeper_assets",
  "version": "0.1.0",
  "description": "Internet Computer starter application",
  "keywords": [
      "Internet Computer",
      "Motoko",
      "JavaScript",
      "Canister"
  ],
  "scripts": {
      "build": "webpack",
      "prebuild": "npm run copy:types",
      "start": "webpack serve --mode development --env development",
      "prestart": "npm run copy:types",
      "copy:types": "rsync -avr .dfx/$(echo ${DFX_NETWORK:-'**'})/canisters/** --exclude='assets/' --exclude='idl/' --exclude='*.wasm' --delete src/declarations"
  },
  "devDependencies": {
      "@dfinity/agent": "0.10.3",
      "@dfinity/candid": "0.10.3",
      "@dfinity/principal": "0.10.3",
      "@material-ui/core": "4.6.1",
      "@material-ui/icons": "4.5.1",
      "assert": "2.0.0",
      "buffer": "6.0.3",
      "copy-webpack-plugin": "^10.2.4",
      "css-loader": "^6.5.1",
      "events": "3.3.0",
      "html-webpack-plugin": "5.5.0",
      "process": "0.11.10",
      "stream-browserify": "3.0.0",
      "style-loader": "^3.3.1",
      "terser-webpack-plugin": "5.3.1",
      "ts-loader": "^9.2.6",
      "typescript": "^4.5.5",
      "util": "0.12.4",
      "webpack": "5.69.1",
      "webpack-cli": "4.10.0",
      "webpack-dev-server": "^4.4.0"
  },
  "browserslist": [
      "last 2 chrome version",
      "last 2 firefox version",
      "last 2 safari version",
      "last 2 edge version"
  ],
  "dependencies": {
      "@material-ui/core": "4.6.1",
      "@material-ui/icons": "4.5.1",
      "react": "^16.8.2",
      "react-dom": "^16.8.2",
      "react-scripts": "5.0.0",
      "uuid": "8.3.2"
  }
}

Deploy the DApp

Go to Terminal → New Terminal

Inside your Terminal, run the following command to start the local dfx:

dfx start

Once you see the line INFO Starting server. Listening on https://x.x.x.x:8000/, then split out another terminal using (Ctrl + Shift + S).

Now go back to your new terminal pane and run the following command to deploy your hello project:

dfx deploy

Finally, once that’s done, run the following command:

npm start

Now you’re ready to see your dkeeper project, open up your browser and go to: https://localhost:8080/

You should now see this:

Resources | Angela Yu

https://www.udemy.com/course/the-complete-web-development-bootcamp/learn/

Comments

[Sloan the DEV Moderator]

This looks like a great article! 🙌

In fact, the topic of your post would also work really well in the Meta Punk Community too!

Metapunk Web3 Community 🦙

We’re a community where blockchain builders and makers, web3 devs, and nft creators can connect, learn and share 🦙

metapunk.to

Meta Punk is a really cool international NFT and web3 community where artists, web3 developers, and traders can connect, learn, and share exciting discoveries and ideas. 🦙

Would you consider posting this article there too? Because Meta Punk is built on the same platform as DEV (Forem) you can fairly easily copy the Markdown and post it there as well.

Really hope that you'll share this awesome post with the community there and consider browsing the other Forem communities out there!

[Helitha Rupasinghe]

Will move this post to the Metapunk Web3 Community!

[rohitvatsa1]

Its a complete copy from a course including the project used in that course on react and blockchain. Atleast you should have a mention of credit for the source.

[Helitha Rupasinghe]

What did you think of her course? @rohitvatsa1