{"id":20066048,"url":"https://github.com/sean-bradley/r3f-pack","last_synced_at":"2025-04-03T02:10:26.505Z","repository":{"id":199066666,"uuid":"702081537","full_name":"Sean-Bradley/R3F-Pack","owner":"Sean-Bradley","description":"A simplified and maintained react-scripts alternative.","archived":false,"fork":false,"pushed_at":"2024-12-13T17:06:15.000Z","size":1116,"stargazers_count":27,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-24T08:11:22.783Z","etag":null,"topics":["bundler","javascript","r3f","r3f-pack","r3fpack","react","typescript"],"latest_commit_sha":null,"homepage":"https://sbcode.net/react-three-fiber/r3f-pack/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sean-Bradley.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":["Sean-Bradley"],"patreon":"seanwasere","open_collective":null,"ko_fi":"sean_bradley","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2023-10-08T12:49:57.000Z","updated_at":"2024-12-13T17:06:19.000Z","dependencies_parsed_at":"2023-11-15T01:27:20.136Z","dependency_job_id":"aeca9f8d-262a-4277-a227-89dac61cd719","html_url":"https://github.com/Sean-Bradley/R3F-Pack","commit_stats":{"total_commits":108,"total_committers":7,"mean_commits":"15.428571428571429","dds":0.08333333333333337,"last_synced_commit":"1a502a517b09bfcecf95f06f14ecfcf51d0bedaf"},"previous_names":["sean-bradley/react-pack"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sean-Bradley%2FR3F-Pack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sean-Bradley%2FR3F-Pack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sean-Bradley%2FR3F-Pack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sean-Bradley%2FR3F-Pack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sean-Bradley","download_url":"https://codeload.github.com/Sean-Bradley/R3F-Pack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246922247,"owners_count":20855345,"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":["bundler","javascript","r3f","r3f-pack","r3fpack","react","typescript"],"created_at":"2024-11-13T13:54:21.794Z","updated_at":"2025-04-03T02:10:26.482Z","avatar_url":"https://github.com/Sean-Bradley.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Sean-Bradley","https://patreon.com/seanwasere","https://ko-fi.com/sean_bradley"],"categories":[],"sub_categories":[],"readme":"![npm](https://img.shields.io/npm/v/r3f-pack) ![npm](https://img.shields.io/npm/dw/r3f-pack)\n\n# R3F-Pack\n\nA simplified and maintained `react-scripts` alternative.\n\n![R3F-Pack Logo](./img/r3f-pack-logo-1024x512.png)\n\n`react-scripts` is deprecated, but it was good while it lasted.\n\nIt now has many out of date dependencies and working with it sometimes requires quite a few manual band-aids.\n\nSo I created this `R3F-Pack`. I wrote it for my [R3F examples](https://sbcode.net/react-three-fiber/examples/), and it may work with your existing React code also.\n\n## Video Tutorial\n\n[![R3F-Pack replacement for React-Scripts](https://img.youtube.com/vi/w07muxLvPFA/0.jpg)](https://www.youtube.com/watch?v=w07muxLvPFA\u0026list=PLKWUX7aMnlEK9DrrY1yXdiUBro1CryZaX)\n\n## About\n\n`R3F-Pack` runs very similar to how `react-scripts` works, and your project structure remains the same.\n\n- It serves the dev version on port 3000\n- It auto opens the browser at address `http://localhost:3000`\n- It enables Hot Module Reloading (HMR) with fast refresh\n- It serves the development version from the `./public` folder\n- `npm run build` builds a production quality version of your app, and will copy all static files \u0026 folders under `./public` to the `./build` folder ready for deployment\n- Production `bundle.js` contains a hash in its name to prevent caching\n- It supports building with [TypeScript](https://sbcode.net/react-three-fiber/typescript/)\n- It indicates 0 vulnerabilities when running `npm install`, at the time of writing this message\n\n![Zero vulnerabilities](./img/0vulnerabilities.jpg)\n\n## Starting a new Project\n\nTo start a brand-new React project, run\n\n```bash\nnpx new-cra@latest my-app\n```\n\nOr, to also include TypeScript\n\n```bash\nnpx new-cra@latest my-app -ts\n```\n\nThis will create a very basic React application named `my-app` that you can start developing from.\n\nAfter the installation has finished,\n\n```bash\ncd my-app\nnpm start\n```\n\nVisit http://127.0.0.1:3000\n\nYou don't have to name your app `my-app`, you could name it `anything` or `whatever`.\n\n```bash\nnpx new-cra anything\ncd anything\nnpm start\n```\n\nIt's your choice, use any name you like. The name should only contain characters that are lowercase, alphanumeric, hyphens and/or underscores.\n\n## Installing `R3F-pack` for Existing React Projects\n\nIf you already have an existing app that currently uses `react-scripts`, and you want to convert it to use `R3F-pack`, then use these steps below.\n\nFirst uninstall `react-scripts`\n\n```bash\nnpm uninstall react-scripts\n```\n\nNext, install `r3f-pack`\n\n```bash\nnpm install r3f-pack --save-dev\n```\n\nAnd then replace the `start` and `build` commands in your existing `scripts` node in your projects `package.json`\n\n```diff\n{\n    ...\n    \"scripts\": {\n-       \"start\": \"react-scripts start\",\n+       \"start\": \"r3f-pack start\",\n-       \"build\": \"react-scripts build\",\n+       \"build\": \"r3f-pack build\"\n    },\n    ...\n}\n```\n\n## Development\n\nTo start in development mode,\n\n```bash\nnpm start\n```\n\nVisit http://127.0.0.1:3000\n\n## Production\n\nTo build production\n\n```bash\nnpm run build\n```\n\nA production quality `bundle.js` will be compiled and all static files and folders under `./public` will be copied to the `./build` folder ready for deployment.\n\nUpload or deploy the contents of the `./build` folder to the location served by your web server.\n\n### Production Build Organized by Date\n\nTo build a production version into a date named folder, then add this line into your `package.json` scripts section,\n\n```diff\n{\n    ...\n    \"scripts\": {\n       \"start\": \"r3f-pack start\",\n       \"build\": \"r3f-pack build\",\n+      \"buildByDate\": \"r3f-pack buildByDate\"\n    },\n    ...\n}\n```\n\nand then build using the command,\n\n```bash\nnpm run buildByDate\n```\n\nThis command will generate a production build in a folder named with the current date (e.g., ./build/23-07-2024). This can help in organizing builds by date for easier management and deployment tracking.\n\n### Test Production Build Locally\n\nTo test your production build locally you can use `http-server`\n\nInstall it if you don't already have it.\n\n```bash\nnpm install --global http-server\n```\n\nStart it\n\n```bash\nhttp-server .\\build\\\n```\n\nor if using PowerShell\n\n```bash\nhttp-server.cmd .\\build\\\n```\n\nVisit http://127.0.0.1:8080\n\n## Boilerplate\n\nI have many boilerplate branches that use `R3F-pack` by default. You can have a ready-made project to begin from by following these commands instead.\n\n```bash\ngit clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git\ncd React-Three-Fiber-Boilerplate\nnpm install\nnpm start\n```\n\nThere are over 60 branches in the [React-Three-Fiber-Boilerplate](https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate) repository.\n\nYou may decide you want something more sophisticated to begin from, for example, you could switch to the `componentize` branch.\n\n```bash\ngit checkout componentize\nnpm install\nnpm start\n```\n\nOr maybe checkout one of these other branches,\n\n```bash\ngit checkout obstacleCourse\ngit checkout componentize\ngit checkout pinball\ngit checkout jeasings\ngit checkout followCam\n```\n\nThere are many branches to look at, see here at [https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate/branches/active](https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate/branches/active)\n\n## Troubleshooting\n\nThis is quite a minimal project, and only mimics the basic functionality of `react-scripts`. If it is missing something that you need, I may be able to add it, or if you know how to do it yourself, then you can make a pull request.\n\n### babel-loader doesn't exist\n\n`r3f-pack` and `react-scripts` share some dependencies. However, you can uninstall `react-scripts` before you install `r3f-pack` if you want to keep your code and dependencies neater.\n\nIf you uninstall `react-scripts` \u003cu\u003eafter\u003c/u\u003e you've installed `r3f-pack`, then you will have also uninstalled some dependencies also required of `r3f-pack`\n\nSo, you will need to clean up your `./node_modules` folder.\n\nFirst uninstall `react-scripts`\n\n```bash\nnpm uninstall react-scripts\n```\n\nNext, also uninstall `r3f-pack` just to be sure you got everything.\n\n```bash\nnpm uninstall r3f-pack\n```\n\nThen re-install `r3f-pack`\n\n```bash\nnpm install r3f-pack --save-dev\n```\n\nNow start development.\n\n```bash\nnpm start\n```\n\nYour browser should auto open to http://127.0.0.1:3000\n\n## Sponsoring\n\nIf you would like me to update your `react-scripts`/`CRA` project to use `R3F-Pack`, then consider [sponsoring](https://github.com/sponsors/Sean-Bradley) and notify me of your repository, so I can make a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsean-bradley%2Fr3f-pack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsean-bradley%2Fr3f-pack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsean-bradley%2Fr3f-pack/lists"}