R3F-Pack

GitHub : https://github.com/Sean-Bradley/R3F-Pack

Video Lecture

Section	Video Links
R3F-Pack replacement for React-Scripts

Description

R3F-Pack is a simplified and maintained react-scripts alternative.

It performs all the same functionality that react-scripts provides in this course,

• It serves the dev version on port 3000
• It auto opens the browser at address http://localhost:3000
• It enables Hot Module Reloading (HMR)
• It serves the development version from the ./public folder
• npm run build builds a production quality version of your app, and will copy all static files & folders under ./public to the ./build folder ready for deployment
• Production bundle.js contains a hash in its name to prevent caching
• It supports building with TypeScript
• It indicates 0 vulnerabilities when running npm install, at the time of writing this message

Installation

R3F-Pack is an optional alternative to react-scripts.

First uninstall react-scripts

npm uninstall react-scripts

Next, install r3f-pack

npm install r3f-pack@latest --save-dev

And then replace the start and build commands in your existing scripts node in your projects package.json

{
    ...
    "scripts": {
-       "start": "react-scripts start",
+       "start": "r3f-pack start",
-       "build": "react-scripts build",
+       "build": "r3f-pack build"
    },
    ...
}

Development

To start in development mode is the same as before.

npm start

Your default browser should open http://localhost:3000/ automatically for you.

I will be phasing out the usage of react-scripts in all the boilerplate branches over time.

Production

To build production

npm run build

A 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.

Upload or deploy the contents of the ./build folder to the location served by your web server.

To test your production build locally you can use http-server

Install it if you don't already have it.

npm install --global http-server

Start it

http-server .\build\

or if using PowerShell

http-server.cmd .\build\

Visit http://127.0.0.1:8080

Useful Links

R3F-Pack	GitHub	NPM

Troubleshooting

Using R3F-Pack is optional and only mimics the most used functionality of react-scripts to make it easier to keep to 0 vulnerabilities.

Remember that It is optional, and that you can change your mind if you want to go back to using react-scripts.

If so, you can reverse all the steps from above.

I.e.,

1. npm uninstall r3f-pack

2. npm install react-scripts --save-dev

3. Edit the package.json → scripts node to call react-scripts instead of r3f-pack, just like how it was before.

Error : babel-loader doesn't exist

R3F-Pack and react-scripts share some dependencies. You can uninstall react-scripts before you install r3f-pack in order to keep your code base and dependencies neater.

If you happened to uninstall react-scripts after you installed r3f-pack, then you would have also uninstalled some of the dependencies that r3f-pack uses.

So, first uninstall react-scripts

npm uninstall react-scripts

and then uninstall r3f-pack

npm uninstall r3f-pack

and then re-install r3f-pack

npm install r3f-pack@latest --save-dev