Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rbolog/dfinity_reactJs_reactRouter_babel

A template that includes Dfinity, ReactJS, React-Router.
https://github.com/rbolog/dfinity_reactJs_reactRouter_babel

dfinity dfx reactjs

Last synced: 3 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/rbolog/dfinity_reactJs_reactRouter_babel
Owner: rbolog
Archived: true
Created: 2021-06-24T17:02:28.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-11-14T12:14:20.000Z (almost 2 years ago)
Last Synced: 2024-06-21T18:09:14.432Z (5 months ago)
Topics: dfinity, dfx, reactjs
Language: JavaScript
Homepage:
Size: 739 KB
Stars: 6
Watchers: 1
Forks: 1
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome-icp - rbolog/dfinity_reactJs_reactRouter_babel - Router. (Front-end)

README

> **Warning**
> This project is no longer maintained and is replaced by [dfx_base](https://gitlab.com/kurdy/dfx_base)

# dfinity_reactJs_reactRouter_babel

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

## Prerequisites

* [Dfinity sdk version 0.11.2](https://smartcontracts.org/docs/quickstart/local-quickstart.html)
* npm

## Recipe to create the project by hand (best)

### Create a projet using dfx

`dfx new `

### 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

```javascript
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
```javascript
{
"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
1. Rename folder _/src/**dfinity_reactJs_reactRouter_babel_frontend**_ with your
1. Rename folder _/src/**dfinity_reactJs_reactRouter_babel_backend**_ with your
1. Update name and description in **package.json**
1. Update **dfx.json** search for _**dfinity_reactJs_reactRouter_babel**_ and replace with your
1. Update **webpack.config.js** search for _**dfinity_reactJs_reactRouter_babel**_ and replace with your

Command `npm install`

Command `dfx deploy`

## Finally

Add or update front-end files in _./src/\_assets/src/_

Take care of *wrapper.js* by updating _import_ and _Actor.createActor_

Use command `dfx deploy` or `npm start`

# Try it!

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rbolog/dfinity_reactJs_reactRouter_babel)

# Alternatives [(read forum)](https://forum.dfinity.org/)

* [App skeleton including primereact and internet identity](https://gitlab.com/kurdy/dfx_skeleton)
* [Easiest way to get started with frontend. ...](https://forum.dfinity.org/t/easiest-way-to-get-started-with-frontend-templates-for-react-vue-svelte-based-on-vitejs/2589?u=rbolog)
* [How do I connect a React front-end with a Canister](https://forum.dfinity.org/t/how-do-i-connect-a-react-front-end-with-a-canister/2301?u=rbolog)
* Dfinity doc. [Add front-end assets](https://sdk.dfinity.org/docs/developers-guide/webpack-config.html)
* [Kyle Peacock dfx-template-react](https://github.com/krpeacock/dfx-template-react)