Skip to content

Build Course Boilerplate

Video Lecture

Section Video Links
Build Course Boilerplate Build Course Boilerplate Build Course Boilerplate

Description

We will now build a bare minimum React Three Fiber boilerplate that we will use to start the course.

The boilerplate is almost the absolute minimum that you need to get React Three Fiber to display a Three.js scene. We will make many additions to the boilerplate as the course progresses.

Create Project Folder

Now to start creating our working folders and files.

Open a command/terminal prompt and create a new folder on your system somewhere.

mkdir react-three-fiber-boilerplate

CD into the new folder.

cd react-three-fiber-boilerplate

Create ./package.json

In your projects root folder, create a new file named package.json

Copy/paste the script below into it and save.

Note

I have provided two versions of package.json.

r3f-pack is newer, works the same as react-scripts, and has no known severity warnings at the time of writing this message.

react-scripts is demonstrated in the video, however I no longer recommend using it, due to many unmanaged severity warnings.

You can copy either package.json configuration below into your project, as they both work for all use cases demonstrated in the course and R3F examples.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
  "name": "react-three-fiber-boilerplate",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.jsx",
  "devDependencies": {
    "@react-three/fiber": "latest",
    "r3f-pack": "latest",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "three": "latest"
  },
  "scripts": {
    "start": "r3f-pack start",
    "build": "r3f-pack build"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "name": "react-three-fiber-boilerplate",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.jsx",
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@react-three/fiber": "^8.15.14",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1",
    "three": "0.160.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Create ./src/index.jsx

Create a new folder in your project root called src

Add a new file named index.jsx

Copy/paste the script below into it and save.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { Canvas } from '@react-three/fiber'
import './styles.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Canvas camera={{ position: [0, 0, 2] }}>
      <mesh>
        <boxGeometry />
        <meshBasicMaterial color={0x00ff00} wireframe />
      </mesh>
    </Canvas>
  </StrictMode>
)

Create ./src/styles.css

In the ./src folder, add a new file named styles.css

Copy/paste the script below into it and save.

1
2
3
4
5
6
7
html,
body,
#root {
  height: 100%;
  margin: 0;
  background: #000000;
}

Create ./public/index.html

Create a new folder in your project root called public

Add a new file named index.html

Copy/paste the script below into it and save.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>React Three Fiber Tutorials by Sean Bradley</title>
  </head>

  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root"></div>
  </body>
</html>

Install It

Install the dependencies listed in the package.json

npm install

Start It

And now we can start it.

npm start

A browser should automatically open at the address http://localhost:3000/

If not, then you can open a browser and visit http://localhost:3000/ manually.

You should see a green wireframe cube in the browser.

Summary

Now this is basically the bare minimum you need to see a React Three Fiber Threejs scene in your browser. If you are experienced with React already, you may have been tempted to run npx create-react-app react-three-fiber-boilerplate for example. You could have done this, and still installed the React Three Fiber and Three.js dependencies manually, but you would have many more files in your project that may distract you while learning. This is something that you can experiment with later just to compare the difference and see if you prefer it.

Now, your project file structure should now resemble,

|-- react-three-fiber-boilerplate
    |-- node_modules
        |-- (Many extra files and folders containing the required dependencies)
    |-- public
        | index.html
    |-- src
        | index.jsx
        | styles.css
    |-- package.json
    |-- package-lock.json

When installing the dependencies earlier, it saved all the required libraries into the node_modules folder to be used when React starts and builds our project.

Prettier

As an extra tool to help us format our code, I like to use prettier in my VSCode IDE.

Add a file named .prettierrc to your project root folder, copy-paste the script below and save.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": true
}

Now in VSCode, when you press the SHIFT ALT F keys together, it will format your code consistently according to those rules above. This is optional.

ESLint

It is useful to have a linter check your code as you develop it. You can also add the ESLint linter to your project if you desire.

Create a file in your project root named .eslintrc and add the following code to it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
  "extends": "react-app",
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

Then in VSCode, open the Extensions tab on the left, search for ESLint and install it.

Now when you edit and save your code, ESLint will check it for common mistakes and make suggestions.

GitHub

This boilerplate as it is now, can also be viewed, forked and downloaded from GitHub.

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
npm install
npm start

Visit http://127.0.0.1:3000

You should see a black screen with a green wireframe cube.

Working Example

<>

react-scripts Deprecation

When using react-scripts, which is the library I've installed in the video, and is also used by Create React App (CRA), you will see a warning of many vulnerabilities when running npm install.

Vulnerabilities warning

It is debatable whether this is a real issue or not since you are only developing locally, and it still tends to work very well for development, and will continue to serve your development version despite the warnings.

When you build your production version, all the react-scripts related code should be removed.

As an optional alternative to using react-scripts, I have created a library named R3F-Pack.

It is a simplified and maintained react-scripts alternative.

It works for all the use cases in this course, and most importantly, it indicates 0 vulnerabilities when running npm install. (at the time of writing this message)

Found 0 Vulnerabilities

Error : We're unable to detect target browsers

If using react-scripts, you may be prompted to add the target browsers defaults to your package.json?

Press Y to continue.

It will add the browserslist node to your package.json

Error : ENOENT: no such file or directory, lstat

When running npx commands, you may get an error stating that it cannot find lstat.

Open a command/bash/powershell prompt and run

npm install -g npm

Comments