DEV Community: Kevin Beltrão

How to make 3D websites with React Three Fiber

Kevin Beltrão — Sun, 06 Nov 2022 13:49:35 +0000

Introduction

The idea here is to introduce you to WebGL, Three.js, and React Three Fiber concepts, even if you don't know what either of them is. I hope I can get you to understand a little bit of what happens when developing 3D software on your browser.

First, I'll get you into some new concepts so you understand what I'll be talking about. How is the browser able to render 3D at all? Then we're coding a small demo with our first 3D view and animations.

The idea is not to get very deep into R3F but to show how few lines of code can deliver great results. So even though I'm not getting into things such as loading models, their docs are very easy and clear.

The result is available in this repository on Github, feel free to checkout.

WebGL

Making it simple, WebGL is a JavaScript API that renders triangles very fast. It uses GPU since its focus is on making many operations in parallel (while CPU would be generally much faster but more limited to parallel operations).

When building more complex objects, it'll be needed to place many different triangles in different places, sizes, and colors. The triangles are drawn inside a <canvas> and the GPU is responsible for drawing them. The instructions to place points and draw pixels are written in shaders, to which we provide info such as points positions, colors, camera position, and model transformations.

The main issue with WebGL is that it's very hard. You'd need over 100 lines to write a single triangle as you can check in this example, so imagine positioning every single one of them in a complex shape, making sure each one of them has a color compatible with the lightning, size according to the perspective, etc.

Also, WebGL has great compatibility across different browsers as you can check here and I advise you to check out Mozilla's docs on WebGL.

Three.js

Three.js is a JavaScript library under the MIT license that makes it easier for users to work with WebGL. It's still close enough to WebGL so you can interact with it directly, but will make our lives way easier.

It's important to understand the 4 main elements in Three.js:

Objects - Elements you're using in your Three.js project, such as lights, imported 3D models, geometries, etc. When creating an object we'll need a Mesh (combination of a geometry (shape) and a material (color/texture/etc)).
Scene - The container of the objects, is what Three.js is asked to render.
Camera - Defines how we'll view the scene. Three.js provides many different camera types, the main two are the perspective camera and the orthographic camera, but another example is the stereo camera, which simulates human eyes by adding two different views side by side (if you wanna build VR software for example). You can check more about cameras in their documentation.
Renderer - What displays the scene in the canvas.

On their official website you can check many websites that use Three.js.

React Three Fiber

React Three Fiber is a React renderer for Three.js which promises to have no limitations when working with Three.js. It also abstracts a lot of code, which means will have to write way less to deliver the same thing.

Have a look at their repository and their docs.

Demo

Creating project

First of all, let's start creating a react app. I'll be using yarn

yarn create react-app react-three-fiber-demo

Then let's install the main dependencies

yarn add three @react-three/fiber

I'll also suggest installing three types because even though we won't be using TypeScript for this demo, it'll improve VS Code suggestions

yarn add -D @types/three

Now, let's delete the files we won't be using in our demo inside the src/ folder, leaving just App.js, index.css, and index.js (remember to remove the imports of deleted files on index.js).

Canvas

The first thing you should know is that react has its own renderer. When we use JSX, React's renderer understands why should HTML tags, such as a <h1>, become.

Just like React's renderer, we'll need one for Three.js. We'll be writing tags that don't belong to JSX's syntax and it'll understand its own tags.

For that, we'll import Canvas from @react-three/fiber, and what goes in it is R3F code, NOT JSX, just like we can't add R3F code outside the Canvas.

So, replace the App.js content to that:

import { Canvas } from '@react-three/fiber';

const App = () => {
  return (
    <Canvas>
      {/* Code here */}
    </Canvas>
  );
};

export default App;

Object

So, let's start by adding an object to our project. We'll do it by adding a mesh and informing what kind of geometry we want. For this example, we'll use a boxGeometry.

import { Canvas } from '@react-three/fiber';

const App = () => {
  return (
    <Canvas>
      <mesh>
        <boxGeometry />
      </mesh>
    </Canvas>
  );
};

export default App;

You should be seeing a very small gray square. The reason it's small is that the canvas will have its parent's size, so let's edit index.css to:

html,
body,
#root {
  margin: 0;
  padding: 0;

  width: 100%;
  height: 100%;

  position: fixed;
  top: 0;
  left: 0;

  overflow: hidden;
}

And now your gray square should be bigger.

Orbit controls

What looks like to be a gray square is actually not a gray square, but a 3D box (even though you can't actually see its depth). If you'd like to be able to check your 3D object, let's install drei, a module with utility and helper functions.

yarn add @react-three/drei

Now, if we import OrbitControls and add this component to our code, we should be able to spin the Cube by dragging the page with the mouse.

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

const App = () => {
  return (
    <Canvas>
      <OrbitControls />

      <mesh>
        <boxGeometry />
      </mesh>
    </Canvas>
  );
};

export default App;

Material

We should also add a material to our mesh, so we can apply color to our geometry. Let's add a meshBasicMaterial with the red color and check the result.

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

const App = () => {
  return (
    <Canvas>
      <OrbitControls />

      <mesh>
        <boxGeometry />
        <meshBasicMaterial color="red" />

      </mesh>
    </Canvas>
  );
};

export default App;

Now we have a red cube, but as you can tell the basic material only adds a flat color that doesn't look realistic. Let's change it to the standard material and check the results.

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

const App = () => {
  return (
    <Canvas>
      <OrbitControls />

      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="red" />

      </mesh>
    </Canvas>
  );
};

export default App;

Now we have a black cube, but why? Because the standard material reacts to the light, which we didn't add.

Lights

So let's add a directional light and set its position:

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

const App = () => {
  return (
    <Canvas>
      <OrbitControls />

      <directionalLight position={[1, 2, 3]} />

      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="red" />
      </mesh>
    </Canvas>
  );
};

export default App;

Now, spinning the cube, we can see that the faces that receive light get red, but the faces that get no light are still completely black, which is also not realistic. So let's also add an ambient light with a 0.5 intensity:

import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

const App = () => {
  return (
    <Canvas>
      <OrbitControls />

      <directionalLight position={[1, 2, 3]} />
      <ambientLight intensity={0.5} />

      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="red" />
      </mesh>
    </Canvas>
  );
};

export default App;

PS: Remember all the arguments you can pass to the elements are available on the docs I linked before.

Movement

Alright, now we have a better cube reacting to light. Let's make it move!

We'll now import a hook called useFrame from React Three Fiber, but this kind of hook must be called inside the canvas, so we can't just call it in the App component.

So let's create a specific component for the box:

// Box.js

const Box = () => {
  return (
    <mesh>
      <boxGeometry />
      <meshStandardMaterial color="red" />
    </mesh>
  );
};

export default Box;

// App.js
import { Canvas } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';

import Box from './Box';

const App = () => {
  return (
    <Canvas>
      <OrbitControls />

      <directionalLight position={[1, 2, 3]} />
      <ambientLight intensity={0.5} />

      <Box />
    </Canvas>
  );
};

export default App;

And now let's import the useFrame inside Box.js. This hook will call a function on every frame rendered. Know this box is already rerendering multiple times per second. Also, we'll use React's useRef hook to reference our mesh.

// Box.js
import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';

const Box = () => {
  const boxRef = useRef();

  useFrame(() => {
    boxRef.current.position.x += 0.01;
  });

  return (
    <mesh ref={boxRef}>
      <boxGeometry />
      <meshStandardMaterial color="red" />
    </mesh>
  );
};

export default Box;

The callback function passed to useFrame is changing the box's position on the X axis on each frame, and now you can see your box moving.

Speed issue

The issue here is that different computers will have different powers and different frame rates, which means that this function will be called more or less times (depending on how often the computer can rerender the scene).

To prevent different results across different computers, we can use a built in solution. The first parameter passed by useFrame is the state, that contains the clock object. There, we'll be able to find a property called elapsedTime, which gets the time continuously (always increasing from the first time it was called on).

It means we can use the elapsedTime instead of the amounts of time the function was called to set the position of the box, assuring everyone will get the same output:

// Box.js
import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';

const Box = () => {
  const boxRef = useRef();

  useFrame((state) => {
    const { elapsedTime } = state.clock;
    boxRef.current.position.x = elapsedTime;
  });

  return (
    <mesh ref={boxRef}>
      <boxGeometry />
      <meshStandardMaterial color="red" />
    </mesh>
  );
};

export default Box;

Final touches

And just to keep our box in the view, let's change this function to make the cube comeback after a while. We can use sin/cos since they vary from -1 to 1. So I'll change the position x and y according to sin/cos to make the box move in a circle:

// Box.js
import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';

const Box = () => {
  const boxRef = useRef();

  useFrame((state) => {
    const { elapsedTime } = state.clock;
    boxRef.current.position.x = Math.sin(elapsedTime);
    boxRef.current.position.y = Math.cos(elapsedTime);
  });

  return (
    <mesh ref={boxRef}>
      <boxGeometry />
      <meshStandardMaterial color="red" />
    </mesh>
  );
};

export default Box;

And now you should see this:

Conclusion

There's way more into R3F, I hope that was a good introduction. Content on Three.js is not as easy to find as other tools, but I assure the best way of learning is by practicing and making projects.

As a next step suggestion, try adding a texture to that cube. Also, try loading a GLTF model using drei's useGTLF hook. A good website to find free models is sketchfab.com.

Stop saving lines!

Kevin Beltrão — Wed, 19 Oct 2022 12:39:31 +0000

Introduction

In this article, I’m gonna argue why you should write more lines of code when developing software. First of all, it might be a good idea to clarify what I’m not trying to say.

Having your project divided into modules using different files is something that you should look forward to. Having your code divided by responsibility improves clarity and makes it easier to maintain the project. That out of the way, the goal here is not to add lines just to have a longer code, but to prioritize readability instead.

Ternary

Many languages, especially JavaScript, bring many awesome features so we can have the same algorithms with less or clearer code. A good example would be the ternary operator, which many times will save us needless lines of the if/else statement.

// before
if (condition) {
  variable = 3;
} else {
  variable = 2;
}

// then
variable = condition ? 3 : 2;

So why or when should we avoid saving lines? Following the ternary example, what if we had nested ternaries?

variable = condition ? (condition2 ? 3 : 1) : 2;

Is it still clear? Still worth writing it in a single line? I don't think so.

// before
variable = condition ? (condition2 ? 3 : 1) : 2;

// then
if (condition) {
  variable = condition2 ? 3 : 1;
} else {
  variable = 2;
}

Yeah, the code got way longer, but always try to be understood through your code. If you'll probably have a hard time reading it later, imagine your teammates.

Variables

As in the ternary example, sometimes it's hard to resist just adding all the expressions in the same line, but it can get a little confusing. Creating variables to describe what's happening will help other engineers at reading the code later.

// before
const getRandomInteger = (min, max) => Math.trunc(Math.random() * (max - min + 1)) + min;

// then
const getRandomInteger = (min, max) => {
  const randomDecimal = Math.random();
  const numberOfPossibilities = max - min + 1;

  const randomIntegerFromZero = Math.trunc(randomDecimal * numberOfPossibilities);
  const randomIntegerFromMin = randomIntegerFromZero + min;

  return randomIntegerFromMin;
};

Even though our code got bigger, take a look at how much easier it got to understand what's happening to the code.
1 - We get a random decimal
2 - Calculate the number of possibilities you have
3 - Generate a random integer from 0 to the number of possibilities
4 - Use the min value as an offset so the random integer is in the right range.

If you were an engineer in this team, which code would you rather have to understand and refactor?

Functions as labels

The reason we are told that functions exist is to reuse the code instead of rewriting the whole thing. But that's not their only purpose. A smart move is using functions to name a block of code and improve its readability.

Using the same example, let's say we have a function that filters programmers in an array and randomly picks one of them to get a prize. Let's see which one is easier to read.

// before
const getRandomProgrammer = (people) => {
  const programmers = people.filter(({ job }) => job === 'programmer');

  const min = 0;
  const max = programmers.length - 1;

  const randomDecimal = Math.random();
  const numberOfPossibilities = max - min + 1;

  const randomIntegerFromZero = Math.trunc(randomDecimal * numberOfPossibilities);
  const randomIntegerFromMin = randomIntegerFromZero + min;

  const winner = programmers[randomIntegerFromMin];

  return winner;
};

// then
const getRandomInteger = (min, max) => {
  const randomDecimal = Math.random();
  const numberOfPossibilities = max - min + 1;

  const randomIntegerFromZero = Math.trunc(randomDecimal * numberOfPossibilities);
  const randomIntegerFromMin = randomIntegerFromZero + min;

  return randomIntegerFromMin;
};

const getRandomProgrammer = (people) => {
  const programmers = people.filter(({ job }) => job === 'programmer');

  const winnerIndex = getRandomInteger(0, programmers.length - 1);

  const winner = programmers[winnerIndex];

  return winner;
};

Even though now we have more lines of code, since now we're declaring a function, notice how much cleaner and readable getRandomProgrammer got. Instead of actually having to read each step of the algorithm, now you read a descriptive label (in this case getRandomInteger) and you know exactly what it's doing. And if I want to understand getRandomInteger, I can just read it knowing its logic is restricted between those curly braces.

PS: See how that also replaces comments in a more elegant way, instead of leaving a // getting random number before that block.

Line breaks

Breaking lines also improves code readability, if done properly. Let's think of ways to help our eyes at identifying patterns. What if, in the example below, we start each method in its own line instead of leaving it single lined?

// before
const ages = people.filter(({ job }) => job === 'programmer').sort((a, b) => (a.name < b.name ? -1 : 1)).map((programmer) => programmer.age);

// then
const ages = people
  .filter(({ job }) => job === 'programmer')
  .sort((a, b) => (a.name < b.name ? -1 : 1))
  .map((programmer) => programmer.age);

And what if we give each condition its own line?

// before
if (job === programmer && age >= 18 && index !== winnerIndex && name.length !== 0) {
  giveConsolationPrize();
}

// then
if (
  job === programmer
  && age >= 18
  && index !== winnerIndex
  && name.length !== 0
) {
  giveConsolationPrize();
}

And as the last line break tip, add empty lines between your code to improve readability! You can divide them by any category you can think of. Let's revisit the random integer code example:

// before
const getRandomInteger = (min, max) => {
  const randomDecimal = Math.random();
  const numberOfPossibilities = max - min + 1;
  const randomIntegerFromZero = Math.trunc(randomDecimal * numberOfPossibilities);
  const randomIntegerFromMin = randomIntegerFromZero + min;
  return randomIntegerFromMin;
};

// then
const getRandomInteger = (min, max) => {
  const randomDecimal = Math.random();
  const numberOfPossibilities = max - min + 1;

  const randomIntegerFromZero = Math.trunc(randomDecimal * numberOfPossibilities);
  const randomIntegerFromMin = randomIntegerFromZero + min;

  return randomIntegerFromMin;
};

Notice how it gets harder to lose yourself in the lines in the second example. Now it's simpler to focus on specific blocks of code each time.

Conclusion

Even though I tried coming up with a few categories and examples, the important part is the concept I'm trying to express. Develop the habit of taking a second look at your code and ask yourself if it could be more expressive. Of course, you should not be extremist, consider the tradeoffs and evaluate factors, such as code complexity.

Question mark features in JavaScript

Kevin Beltrão — Wed, 22 Jun 2022 11:59:06 +0000

Introduction
Ternary
Optional Chaining
Nullish Coalescing Operator
Logical Nullish Assignment

Introduction

JavaScript has some pretty helpful features that use ? in the syntax, but they don't necessarily have much in common besides the question mark. In this article, my goal is to show you cool tricks, starting with a well-known (and also present in other languages, which is the ternary) and going through some less known operators.

If you want to find more about me, @kevbeltrao on Instagram, Youtube, Github, Linkedin, etc. Or simply kevbeltrao.com.br.

Ternary

Ternary is basically a different way to write an if/else statement. The regular if/else statement is represented like:

if (condition) {
  actionIfTrue();
} else {
  actionIfFalse();
}

I like to think of the ternary as a question, so if I want to ask "is it a panda?" I need that question mark. After the question, I need the return options of the ternary (the option if the condition is true and the option if false), which will be separated by a :

isPanda ? actionIfTrue() : actionIfFalse() // We're asking if isPanda is true/truthy

And as pointed out, you choose the return value of the ternary. It's an expression, so you can use it for a value assignment, for example:

const animalColor = animal === 'panda' ? 'white' : 'blue';

And of course you can nest ternaries (which I strongly discourage due to its loss of readability):

const animalColor = animal === 'panda' ? 'white' : animal === 'crocodile' ? 'green' : 'blue';

Which has the same effect as in:

let animalColor;

if (animal === 'panda') {
  animalColor = 'white';
} else if {
  animalColor = 'green';
} else {
  animalColor = 'blue';
}

Optional Chaining

Optional chaining is one of the most awesome features in JavaScript, it helps us with value checking if values are undefined using a shorter syntax. First of all, I'll show you what you should be afraid of:

const person = {
  address: {
    streetName: 'JS Ave',
  }
};

getCityPhoneCode(person.address.city);

In this case, we are trying to access city within address, which doesn't exist. No problems so far, the application won't crash by that (unless getCityPhoneCode expects a valid value), but we are sending the value undefined as an argument. So, in JavaScript, if you try accessing an unexisting value from an object you get undefined. Keep that in mind!

But what if our code was:

const person = {};

getCityPhoneCode(person.address.city);

In this case, our application would crash because we are not trying to access an unexisting property from an object anymore, but from undefined. The problem here is that address is undefined, so we can't do undefined.city. Since there's a chance of address being undefined, we'd have to be extra careful and usually make a simple check before:

if (person.address) {
  getCityPhoneCode(person.address.city);
}

But JavaScript now provides us optional chaining, which would look like that:

const person = {};

getCityPhoneCode(person.address?.city);

So if address is null/undefined, we'll instantly get undefined returned instead of having our app crashing trying to access city. We can also have multiple checks:

person?.eyes?.color?.hex;

And if either person, eyes, or color is null/undefined, undefined is returned and our code is protected from the error cannot read properties of undefined.

Nullish Coalescing Operator

Nullish Coalescing Operator looks scary but is even simpler than the previous ones. To simplify, the question you want to make is "is this value either null or undefined?" if so, return the next one (it'll get easier with examples):

null ?? 1 // 1
undefined ?? 'Hello, World' // 'Hello, World'
0 ?? 4 // 0
false ?? 3 // false

It's often compared to the || (or) operator, which returns the first truthy value (or the last value if neither are truthy):

null || 1 // 1
undefined || 'Hello, World' // 'Hello, World'
0 || 4 // 4
false || 3 // 3

Let's say you want to send the price for a function, but the price might be undefined and if so, the product is free. What you wanna do is:

applyDiscount(price ?? getPrice());

And this way, if price is 3.59, we'll send this value as an argument. In case price is null/undefined, we're calling getPrice and sending its return to applyDiscount.

Logical Nullish Assignment

If you got the last one, this one uses pretty much the same logic. Do you know when you want to assign a value to a variable but only if it hasn't already been done? Here's what it'd look like:

price ??= 0;

What we are saying is: assign 0 to price, but only if its value is null/undefined.

In other words, it's a way of making sure you're only assigning a value if the variable doesn't have one yet.

React Typescript Microfrontend Monorepo with single-spa + Lerna

Kevin Beltrão — Thu, 14 Oct 2021 16:38:11 +0000

Repository with full code if you want to follow like that
https://github.com/KevBeltrao/microfrontend-monorepo-article

What do I expect from you

You should know React to follow the article. I didn't explain how hooks and routes work, for example. But if you want to learn more about React, you can follow my Youtube channel: https://www.youtube.com/KevBeltrao

If you want to contact me, all my social media is available on https://kevbeltrao.com.br/

Single SPA

"Framework for bringing together multiple JavaScript microfontends in a frontend application." https://single-spa.js.org/

Lerna

Tool we're gonna use to handle multiple JavaScript projects in the same repo. https://lerna.js.org/

Why microfrontend?

Scaling preventing the application from growing complex (as having a components folder with 100 others folders inside)
Each project might use the technology that best fits its needs (the same project might have a React, Angular and a Vue app, for example)
Possible to allocate different teams for each application
Updating different apps at different times without having to build the whole thing everytime

Why monorepo?

Easier to manage, since you don't need to worry about updating every other repo when changing one's version
Sharing code is easier, we can add a project as another project's dependency
Sharing the same node_modules for dependencies will save you a little space on your computer

Setting up monorepo project

First, you need to have lerna installed globally:

npm i -g lerna

Create a new repository:

git init my-project && cd my-project

And initialise lerna inside the repo:

lerna init

Once you did it, your folder should look like this:

my-project/
  packages/
  lerna.json
  package.json

The packages folder is where we'll leave our applications.

We are using Yarn and Yarn workspaces. Yarn workspaces will make our life easier by linking projects and allowing them to consume each other living in the same repository. For more info about Yarn workspaces check the docs https://yarnpkg.com/features/workspaces

We need to tell Lerna we're using Yarn with workspaces, so add these two lines to lerna.json:

{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
+  "npmClient": "yarn",
+  "useWorkspaces": true
}

You also need to tell package.json the folders we're gonna take as workspaces by adding the following:

{
  "name": "root",
  "private": true,
  "devDependencies": {
    "lerna": "^4.0.0"
  },
+  "workspaces": [
+    "packages/*"
+  ]
}

Creating Root Config

To create a microfrontend app, use the command:

npx create-single-spa

And answer it like the following, and then I'll explain about it:

Directory for new project | packages/app-root
Select type to generate | single-spa root config
Which package manager do you want to use? | yarn
Will this project use Typescript? | y
Would you like to use single-spa Layout Engine | n
Organization name | kevbeltrao

(Don't mind if there's a husky warning)

You might have noticed that we have 3 options when selecting the type of application:

single-spa application / parcel
- Application - Just a regular SPA, but without HTML file
- Parcel - Framework agnostic component. Like applications, but you don't have to worry about the framework you're using in the application and must be called by a manual call
in-browser utility module (styleguide, api cache, etc) - The name is intuitive enough!
single-spa root config - App that contains the HTML (EJS) shared between the whole application and register apps. Is the one that orchestrates the microfrontend.

For more info, check the docs https://single-spa.js.org/

Let's start by deleting some stuff we'll not use! Single-spa creates your project as if it was a repository.

Delete the .husky folder and the .prettierignore, .gitignore and .eslintrc files.
In the app-root/package.json, delete the "lint", "format", "check-format" and "prepare" scripts. And remove the eslint, prettier and husky related dependencies.
Delete the .git/ folder running the command:

rm -rf packages/app-root/.git

The most important stuff for you to notice are the index.ejs and kevbeltrao-root-config.ts files.

In the index.ejs, you can see:

<script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js"
      }
    }
</script>

There's where you'll put the dependencies you want to share with other applications.

A little further you'll be able to see:

<% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@kevbeltrao/root-config": "//localhost:9000/kevbeltrao-root-config.js"
      }
    }
  </script>
<% } %>

Which gives a nickname to an app (@kevbeltrao/root-config) and adds where it's running (localhost:9000) + the output js file (kevbeltrao-root-config.js). That's where you're gonna add the applications related to your project.

Where do we point to this nickname? In the kevbeltrao-root-config.ts file:

registerApplication({
  name: "@single-spa/welcome",
  app: () =>
    System.import(
      "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"
    ),
  activeWhen: ["/"],
});

That's the syntax we'll use to register applications to our microfrontend project. The name is the one we choose on the ejs file, the app points to the built version of the app and the active when the route where our app should be rendered.

Add a version to the /app-root/package.json:

{
  "name": "@kevbeltrao/root-config",
+  "version": "1.0.0",
  "scripts": {
...

Add your organization name to the root's package.json file and add the following scripts:

{
-  "name": "root",
+  "name": "@kevbeltrao/root",
  "private": true,
+  "scripts": {
+    "bootstrap": "lerna bootstrap",
+    "start": "lerna run start --stream"
  },
...

Run the bootstrap command to fetch packages and link dependencies. If the node_modules of your projects ever have packages installed, just run this command again in the root directory.

yarn bootstrap

The lerna run command chooses the command that the packages will receive to run. As the command to run the project in the app-root/package.json is "start", we put lerna run start. Adding --stream allow us to see the output of our different packages following its names.

Run

yarn start

Stop running the server and let's keep going.

Creating our first application

Let's, again, from the root directory, run:

npx create-single-spa

This time our answers will be:

Directory for new project | packages/todo
Select type to generate | single-spa application / parcel
Which framework do you want to use? | react
Which package manager do you want to use? | yarn
Will this project use Typescript? | y
Organization name | kevbeltrao
Project name | todo

Let's do the same process again as the other by deleting the husky, eslint and prettier stuff, removing the .git folder and .gitignore file from the new created folder and adding a version to the new package.json.

Then, run yarn boostrap in the root again.

You'll notice 2 important files in the packages/todo/src/

kevbeltrao-todo.tsx - Which points to the root component (like the regular index.tsx of a regular application)
root.component.tsx - Which is like a App.tsx from a regular application, components that exports the whole application

Let's also modify the start script of the new package.json to include the port:

"scripts": {
-    "start": "webpack serve",
+    "start": "webpack serve --port 9001",
...

Now we have to inform our app-root that it should run this project. For that, we'll add this line to the packages/app-root/src/index.ejs:

<% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@kevbeltrao/root-config": "//localhost:9000/kevbeltrao-root-config.js",
+        "@kevbeltrao/todo": "//localhost:9001/kevbeltrao-todo.js"
      }
    }
  </script>
<% } %>

Notice that the output js file is always orgname-appname.js.

So we'll reference this nickname in the packages/app-root/src/kevbeltrao-root-config.ts file by adding:

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@single-spa/welcome",
  app: () =>
    System.import(
      "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"
    ),
  activeWhen: ["/"],
});

+registerApplication({
+  name: "@kevbeltrao/todo",
+  app: () => System.import("@kevbeltrao/todo"),
+  activeWhen: ["/todo"]
+});

start({
  urlRerouteOnly: true,
});

So we would be able to see our new app by accessing http://localhost:9000/todo, but we actually face 2 problems.
1 - We can still see the content of the "/" path
2 - We cannot see our new app

Let's fix it one at a time!

For the first problem, here's the deal:
The activeWhen includes everything that matches the path, so if we are at /todo, we also match the / path.
For that, we can pass a function that returns a boolean instead of an array, so it only matches if our function returns true. So follow my lead:

registerApplication({
  name: '@kevbeltrao/todo',
  app: () => System.import('@kevbeltrao/todo'),
  -activeWhen: ['/'],
  +activeWhen: (location) => location.pathname === '/',
});

Refresh your page aaand..... You see nothing! Perfect! 50% fixed.

If you open the browser console, you'll see that:

Oh no! Our todo app is not finding "react"!

Good news, we can export our common dependencies to the other projects that use them!

We'll add react and react-dom to our packages/app-root/src/index.ejs file.

For that, we're getting the CDN links for both react and react-dom minified here: https://reactjs.org/docs/cdn-links.html

So, with no more smalltalking, let's add them:

  <script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
+        "react": "https://unpkg.com/react@17/umd/react.production.min.js",
+        "react-dom": "https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
      }
    }
  </script>

Aaaand now, if you did everything right, you should be able to see your todo page!

So, to make it faster, I just build a simple todo list component and you should just copy and paste it (of course I consider that you already have the React basics, so I won't explain line per line what's happening). But if you are not good with react hooks yet, you can check the playlist I did with the main ones: https://www.youtube.com/playlist?list=PLooFOXIfdaM3M_xoy2eZg9PvuR-2NJcLj
PS: It's in Portuguese but I intend to add subtitles in a soon future!

First, in the packages/todo/ folder (very important), run the command:

yarn add uuid

We'll use it to create ids for the todo list.
Notice that even tough you're running the command in a specific project and it'll be added to its package.json, the module will be added to the node_modules folder.

Create a packages/todo/src/components/Todo.tsx file with the following:

import { FC, useState } from 'react';
import { v4 as uuid } from 'uuid';

const Todo: FC = () => {
  const [tasks, setTasks] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();

    if (!inputValue) return;

    setTasks((previousTasks) => [
      ...previousTasks,
      { name: inputValue, id: uuid },
    ])

    setInputValue('');
  }

  return (
    <div>
      <h2>What will you do?</h2>

      <form onSubmit={handleSubmit}>
        <input
          value={inputValue}
          onChange={(event) => setInputValue(event.target.value)}
        />

        <button type="submit">Submit</button>
      </form>

      <ul>
        {tasks.map((task) => (
          <li key={task.id}>{task.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Todo;

And change your /packages/todo/src/root.component.tsx like that:

+import Todo from './components/Todo';
+
export default function Root(props) {
  -return <section>{props.name} is mounted!</section>;
+  return (
+    <section>
+       <h1>{props.name} is mounted!</h1>
+
+       <Todo />
+    </section>
+  );
}

And like that, you should have a functioning todo list component at http://localhost:9000/todo!

Adding routes

Let's create a navbar app using the same method as before.

First, in the root:

npx create-single-spa

This should be your input:

Directory for new project | packages/navbar
Select type to generate | single-spa application / parcel
Which framework do you want to use? | react
Which package manager do you want to use? | yarn
Will this project use Typescript? | y
Organization name | kevbeltrao
Project name | navbar

Delete the eslint/prettier/husky/git stuff from the new directory and package.json.

Add a version to the new package.json and the port you wish to have the navbar application running:

{
  "name": "@kevbeltrao/navbar",
  +"version": "1.0.0",
  "scripts": {
    -"start": "webpack serve",
    +"start": "webpack serve --port 9002",
...

Add the new app to the packages/app-root/src/index.ejs file

<% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@kevbeltrao/root-config": "//localhost:9000/kevbeltrao-root-config.js",
        "@kevbeltrao/todo": "//localhost:9001/kevbeltrao-todo.js",
+        "@kevbeltrao/navbar": "//localhost:9002/kevbeltrao-navbar.js"
      }
    }
  </script>
<% } %>

registerApplication({
  name: '@kevbeltrao/navbar',
  app: () => System.import('@kevbeltrao/navbar'),
  activeWhen: ['/'],
});

If it's not working, try again yarn bootstrap in the root directory.

Now you should be able to see the navbar aoo with the "@kevbeltrao/navbar is mounted!" text everywhere.

Let's create the navbar component! First, in the packages/navbar, install react-router-dom:

yarn add react-router-dom

and its types:

yarn add -D @types/react-router-dom

I also taught how to use react router dom on my Youtube channel:
https://youtu.be/9pB_lwmLc74?list=PLooFOXIfdaM2Y3wqkq-jLZrMRst9KIb3B

And add this to your packages/navbar/src/root.component.tsx

import { Link, BrowserRouter } from 'react-router-dom';

export default function Root(props) {
  return (
    <BrowserRouter>
      <header>
        <h1>{props.name} is mounted!</h1>

        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>

            <li>
              <Link to="/todo">Todo</Link>
            </li>
          </ul>
        </nav>
      </header>
    </BrowserRouter>
  );
}

Now we can browse through different applications!

Routes Inside Specific Application

First, last create one more application!
As usual:

npx create-single-spa

This should be your input:

Directory for new project | packages/info-app
Select type to generate | single-spa application / parcel
Which framework do you want to use? | react
Which package manager do you want to use? | yarn
Will this project use Typescript? | y
Organization name | kevbeltrao
Project name | info-app

Delete husky/git/eslint/prettier stuff from directory and package.json, add a port... Ok, you already know it by heart!

Add version and port (on start command) to package.json:

{
  "name": "@kevbeltrao/info-app",
+  "version": "1.0.0",
  "scripts": {
-    "start": "webpack serve",
+    "start": "webpack serve --port 9003",

Add the new app to the index.ejs file:

<% if (isLocal) { %>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@kevbeltrao/root-config": "//localhost:9000/kevbeltrao-root-config.js",
        "@kevbeltrao/todo": "//localhost:9001/kevbeltrao-todo.js",
        "@kevbeltrao/navbar": "//localhost:9002/kevbeltrao-navbar.js",
        "@kevbeltrao/info-app": "//localhost:9003/kevbeltrao-info-app.js"
      }
    }
  </script>
<% } %>

And then to packages/app-root/src/kevbeltrao-root-config.ts

registerApplication({
  name: '@kevbeltrao/info-app',
  app: () => System.import('@kevbeltrao/info-app'),
  activeWhen: ['/info'],
});

And let's also add the new link to our navbar component:

<nav>
  <ul>
    <li>
      <Link to="/">Home</Link>
    </li>

    <li>
      <Link to="/todo">Todo</Link>
    </li>

+    <li>
+      <Link to="/info">Info</Link>
+    </li>
  </ul>
</nav>

Run

yarn bootstrap

And run your project again

yarn start

In the packages/info-app directory:
install react-router-dom:

yarn add react-router-dom

and its types:

yarn add -D @types/react-router-dom

Inside the info-app/src, we'll create a folder with the following files:

src
|_ routes.tsx
|_ pages/
||__ Home.tsx
||__ AboutUs.tsx
||__ Contact.tsx
|_ components/
 |_ Nav.tsx

The content of each file inside pages/ will be:

import { FC } from 'react';

const Home: FC = () => <h2>Home</h2>

export default Home;

But, of course, each one will get a different name and title according to the file name!

The packages/info-app/src/components/Nav.tsx will contain:

import { FC } from 'react';
import { Link } from 'react-router-dom';

const Routes: FC = () => (
  <ul>
    <li>
      <Link to="/">Home</Link>
    </li>

    <li>
      <Link to="/about-us">About Us</Link>
    </li>

    <li>
      <Link to="/contact">Contact</Link>
    </li>
  </ul>
);

export default Routes;

In the packages/info-app/src/routes.tsx file, we'll add:

import { FC } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import AboutUs from './pages/AboutUs';
import Contact from './pages/Contact';
import Home from './pages/Home';

import Nav from './components/Nav';

const Routes: FC = () => (
  <BrowserRouter basename="/info">
    <>
      <Nav />

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about-us" component={AboutUs} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </>
  </BrowserRouter>
);

export default Routes;

Notice that the prop basename that we pass in the BrowserRouter component is the game change! Every time we click on a link, for example:
<Link to="/about-us">About Us</Link>
We'll be actually redirected to /info/about-us.
So we are actually working with subpaths and your app can have its own independent paths!

If you don't add it, you'll be just redirected to /about-us, and there are no apps running in this path.

DEV Community: Kevin Beltrão

How to make 3D websites with React Three Fiber

Introduction

WebGL

Three.js

React Three Fiber

Demo

Creating project

Canvas

Object

Orbit controls

Material

Lights

Movement

Speed issue

Final touches

Conclusion

Stop saving lines!

Introduction

Ternary

Variables

Functions as labels

Line breaks

Conclusion

Question mark features in JavaScript

Table of Contents

Introduction

Ternary

Optional Chaining

Nullish Coalescing Operator

Logical Nullish Assignment

React Typescript Microfrontend Monorepo with single-spa + Lerna

What do I expect from you

Single SPA

Lerna

Why microfrontend?

Why monorepo?

Setting up monorepo project

Creating Root Config

Creating our first application

Adding routes

Routes Inside Specific Application