https://github.com/bytesun/icevent

Last synced: 7 months ago
JSON representation

Host: GitHub
URL: https://github.com/bytesun/icevent
Owner: bytesun
Created: 2021-11-27T05:42:16.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2021-11-27T07:25:44.000Z (over 4 years ago)
Last Synced: 2025-08-30T07:18:00.123Z (8 months ago)
Language: JavaScript
Size: 51.8 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# dfinity_reactJs_reactRouter_babel

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

## Prerequisites

* [Dfinity sdk version 0.8.4](https://dfinity.org/developers)
* 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_assets` with reactjs.

## Recipe to create the project using template

1. Create and clone project from Github
1. Rename folder _/src/**dfinity_reactJs_reactRouter_babel**__assets_ with your
1. Rename folder _/src/**dfinity_reactJs_reactRouter_babel**/_ 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`

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

* [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)

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/bytesun/icevent

Awesome Lists containing this project

README