Warning This project is no longer maintained and is replaced by dfx_base

dfinity_reactJs_reactRouter_babel

A recipe,template that includes Dfinity, ReactJS, React-Router.

Prerequisites

• Dfinity sdk version 0.11.2
• npm

Recipe to create the project by hand (best)

Create a projet using dfx

dfx new <project name>

In the project folder

Install loaders

npm i css-loader style-loader html-webpack-plugin --save-dev

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime --save-dev

Install react

npm i react react-dom react-router-dom

Modify files

webpack.config.js add module

module: {
      rules: [
        { 
          test: /\.css$/,
          use: ['style-loader','css-loader']
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: ['@babel/plugin-transform-runtime']
            }
          }
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
        },
      ]
    },

Create babel.config.json touch babel.config.json

babel.config.json add content

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
}

update package.json

npm outdated

Modify accordingly.

copy source files

Copy from repo. or adapt files in /src/dfinity_reactJs_reactRouter_babel_frontend with reactjs.

Recipe to create the project using template

1. Create and clone project from Github
2. Rename folder /src/dfinity_reactJs_reactRouter_babel_frontend with your <project name>
3. Rename folder /src/dfinity_reactJs_reactRouter_babel_backend with your <project name>
4. Update name and description in package.json
5. Update dfx.json search for dfinity_reactJs_reactRouter_babel and replace with your <project name>
6. Update webpack.config.js search for dfinity_reactJs_reactRouter_babel and replace with your <project name>

Command npm install

Command dfx deploy

Finally

Add or update front-end files in _./src/<project name>assets/src/

Take care of wrapper.js by updating import and Actor.createActor

Use command dfx deploy or npm start

Try it!

Alternatives (read forum)

• App skeleton including primereact and internet identity
• Easiest way to get started with frontend. ...
• How do I connect a React front-end with a Canister
• Dfinity doc. Add front-end assets
• Kyle Peacock dfx-template-react