{"id":13685064,"url":"https://github.com/rbolog/dfinity_reactJs_reactRouter_babel","last_synced_at":"2025-05-01T01:30:24.208Z","repository":{"id":38601590,"uuid":"379996561","full_name":"rbolog/dfinity_reactJs_reactRouter_babel","owner":"rbolog","description":"A template that includes Dfinity, ReactJS, React-Router.","archived":true,"fork":false,"pushed_at":"2022-11-14T12:14:20.000Z","size":757,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-03T14:08:16.658Z","etag":null,"topics":["dfinity","dfx","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rbolog.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-24T17:02:28.000Z","updated_at":"2024-06-08T23:00:42.000Z","dependencies_parsed_at":"2023-01-21T08:17:48.077Z","dependency_job_id":null,"html_url":"https://github.com/rbolog/dfinity_reactJs_reactRouter_babel","commit_stats":null,"previous_names":[],"tags_count":12,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbolog%2Fdfinity_reactJs_reactRouter_babel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbolog%2Fdfinity_reactJs_reactRouter_babel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbolog%2Fdfinity_reactJs_reactRouter_babel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbolog%2Fdfinity_reactJs_reactRouter_babel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rbolog","download_url":"https://codeload.github.com/rbolog/dfinity_reactJs_reactRouter_babel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224230698,"owners_count":17277373,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dfinity","dfx","reactjs"],"created_at":"2024-08-02T14:00:43.126Z","updated_at":"2024-11-12T06:31:07.809Z","avatar_url":"https://github.com/rbolog.png","language":"JavaScript","funding_links":[],"categories":["Front-end"],"sub_categories":[],"readme":"\u003e **Warning**\n\u003e This project is no longer maintained and is replaced by [dfx_base](https://gitlab.com/kurdy/dfx_base) \n\n# dfinity_reactJs_reactRouter_babel\n\nA recipe,template that includes Dfinity, ReactJS, React-Router.\n\n## Prerequisites\n\n* [Dfinity sdk version 0.11.2](https://smartcontracts.org/docs/quickstart/local-quickstart.html)\n* npm\n\n## Recipe to create the project by hand (best)\n\n### Create a projet using dfx\n\n`dfx new \u003cproject name\u003e`\n\n### In the project folder\n\nInstall loaders \n\n`npm i css-loader style-loader html-webpack-plugin --save-dev`\n\n`npm i @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime --save-dev`\n\nInstall react\n\n`npm i react react-dom react-router-dom`\n\n### Modify files\n\n**webpack.config.js** add module\n\n```javascript\nmodule: {\n      rules: [\n        { \n          test: /\\.css$/,\n          use: ['style-loader','css-loader']\n        },\n        {\n          test: /\\.(js|jsx)$/,\n          exclude: /node_modules/,\n          use: {\n            loader: 'babel-loader',\n            options: {\n              presets: ['@babel/preset-env'],\n              plugins: ['@babel/plugin-transform-runtime']\n            }\n          }\n        },\n        {\n          test: /\\.(png|svg|jpg|jpeg|gif)$/i,\n          type: 'asset/resource',\n        },\n      ]\n    },\n```\n\nCreate **babel.config.json**\n`touch babel.config.json`\n\n**babel.config.json** add content\n```javascript\n{\n    \"presets\": [\n      \"@babel/preset-env\",\n      \"@babel/preset-react\"\n    ]\n}\n```\n\nupdate **package.json**\n\n`npm outdated`\n\nModify accordingly.\n\n### copy source files\n\nCopy from repo. or adapt files in `/src/dfinity_reactJs_reactRouter_babel_frontend` with reactjs.\n\n\n## Recipe to create the project using template\n\n1. Create and clone project from Github\n1. Rename folder _/src/**dfinity_reactJs_reactRouter_babel_frontend**_ with your \u003cproject name\\\u003e\n1. Rename folder _/src/**dfinity_reactJs_reactRouter_babel_backend**_ with your \u003cproject name\\\u003e\n1. Update name and description in **package.json**\n1. Update **dfx.json** search for _**dfinity_reactJs_reactRouter_babel**_ and replace with your \u003cproject name\\\u003e\n1. Update **webpack.config.js** search for _**dfinity_reactJs_reactRouter_babel**_ and replace with your \u003cproject name\\\u003e\n\nCommand `npm install`\n\nCommand `dfx deploy`\n\n## Finally\n\nAdd or update front-end files in _./src/\\\u003cproject name\\\u003e_assets/src/_\n\nTake care of *wrapper.js* by updating _import_ and _Actor.createActor_\n\nUse command `dfx deploy` or `npm start`\n\n# Try it!\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rbolog/dfinity_reactJs_reactRouter_babel)\n\n# Alternatives [(read forum)](https://forum.dfinity.org/)\n\n* [App skeleton including primereact and internet identity](https://gitlab.com/kurdy/dfx_skeleton)\n* [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)\n* [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)\n* Dfinity doc. [Add front-end assets](https://sdk.dfinity.org/docs/developers-guide/webpack-config.html)\n* [Kyle Peacock dfx-template-react](https://github.com/krpeacock/dfx-template-react)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbolog%2Fdfinity_reactJs_reactRouter_babel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frbolog%2Fdfinity_reactJs_reactRouter_babel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbolog%2Fdfinity_reactJs_reactRouter_babel/lists"}