{"id":28169723,"url":"https://github.com/bytesun/icevent","last_synced_at":"2025-09-26T13:06:49.062Z","repository":{"id":94985037,"uuid":"432378886","full_name":"bytesun/icevent","owner":"bytesun","description":null,"archived":false,"fork":false,"pushed_at":"2021-11-27T07:25:44.000Z","size":53,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-30T07:18:00.123Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/bytesun.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-11-27T05:42:16.000Z","updated_at":"2021-11-27T07:25:47.000Z","dependencies_parsed_at":"2023-06-11T10:45:45.118Z","dependency_job_id":null,"html_url":"https://github.com/bytesun/icevent","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"rbolog/dfinity_reactJs_reactRouter_babel","purl":"pkg:github/bytesun/icevent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesun%2Ficevent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesun%2Ficevent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesun%2Ficevent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesun%2Ficevent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bytesun","download_url":"https://codeload.github.com/bytesun/icevent/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bytesun%2Ficevent/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277081356,"owners_count":25757426,"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","status":"online","status_checked_at":"2025-09-26T02:00:09.010Z","response_time":78,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-05-15T16:18:42.006Z","updated_at":"2025-09-26T13:06:49.057Z","avatar_url":"https://github.com/bytesun.png","language":"JavaScript","readme":"# dfinity_reactJs_reactRouter_babel\n\nA recipe,template that includes Dfinity, ReactJS, React-Router.\n\n## Prerequisites\n\n* [Dfinity sdk version 0.8.4](https://dfinity.org/developers)\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_assets` 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**__assets_ with your \u003cproject name\\\u003e\n1. Rename folder _/src/**dfinity_reactJs_reactRouter_babel**/_ 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# Alternatives [(read forum)](https://forum.dfinity.org/)\n\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","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytesun%2Ficevent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbytesun%2Ficevent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbytesun%2Ficevent/lists"}