DEV Community: Henrique Jensen

Migrating from create-react-app to Vite: A Quick and Easy Guide

Henrique Jensen — Thu, 20 Jul 2023 20:21:53 +0000

In recent times, React has shifted its recommendation from using create-react-app (CRA) as the starting point for new projects. Instead, it now encourages developers to use a framework for most projects. However, for smaller projects, a full-fledged framework might not be necessary. In such cases, Vite) emerges as a promising option. Vite is not a framework like Next.js or Remix, but it offers several features that make it an excellent choice for small projects, such as personal portfolios, like my portfolio. In this blog post, we will walk you through the steps to migrate from create-react-app to Vite for your next project.

Migration steps

These migration steps assume that we have a CRA project with Typescript.

Removing CRA
Installing Vite dependencies
Moving index.html
Adding vite.config.ts
Adding vite-env.d.ts
Adding vite scripts
Fixing tsconfig.json
Migrating from Jest to Vitest
Extra

Step 1 - Removing CRA

The first step is to uninstall create-react-app from your project.

npm uninstall react-scripts

Step 2 - Installing Vite dependencies

Next, install the required dependencies for Vite.

npm install vite @vitejs/plugin-react-swc vite-tsconfig-paths vite-plugin-svgr

Note: Depending on your specific needs, you can choose a different plugin from the official Vite plugins documentation.

Step 3 - Moving index.html

create-react-app uses public/index.html as the default entry point, while Vite looks for index.html at the root level. To make the transition, move your index.html to the root directory and update the script tag accordingly.

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

  <script type="module" src="/src/index.tsx"></script>
</body>

Step 4 - Adding vite.config.ts

Create a vite.config.ts file at the root of your project with the following content:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  plugins: [react()]
})

Step 5 - Adding vite-env.d.ts

Create a vite-env.d.ts file inside the src folder with the following content:

/// <reference types="vite/client" />

Step 6 - Adding vite scripts

Replace the existing CRA scripts in package.json with Vite scripts.

 "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
}

Step 7 - Fixing tsconfig.json

Update your tsconfig.json to its final version.

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "jsx": "react-jsx",
    "types": ["vite/client", "vite-plugin-svgr/client"]
  },
  "include": ["src"]
}

Step 8 - Migrating from Jest to Vitest

As we are moving to Vite, another good idea is to consider migrating from Jest to Vitest as well. Here are the steps:

8.1 - Install Vitest dependencies:

npm i -D jsdom vitest @vitest/coverage-v8

8.2 - Update vite.config.ts to include Vitest configurations:

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/',
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/setupTests.ts',
    css: true,
    reporters: ['verbose'],
    coverage: {
      reporter: ['text', 'json', 'html'],
      include: ['src/**/*'],
      exclude: [],
    }
  },
})

8.3 - Update package.json with Vitest scripts:

  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview",
    "test": "vitest",
    "test:coverage": "vitest run --coverage --watch=false"
  },

Step 9 - Extras

If you use GitHub Actions to push your code to GitHub Pages, you'll need to update the workflow file as Vite generates a dist folder when we run npm run build.

name: GitHub Pages

on:
  push:
    branches:
      - master
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-22.04
    permissions:
      contents: write
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: "16"

      - name: Cache dependencies
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - run: npm ci
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: github.ref == 'refs/heads/master'
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

With these steps, you should now have successfully migrated your create-react-app project to Vite, enjoying its benefits and optimizing your development process for smaller projects. Happy coding!

How to check if an Object is instance of a Class - Javascript

Henrique Jensen — Mon, 10 Jul 2023 18:07:02 +0000

Today, I encountered a Leetcode challenge: Check if Object Instance of Class. In order to solve this problem, it is important to have a solid understanding of three fundamental concepts in JavaScript: Classes, Objects, and Prototypes.

Class

Classes serve as templates for creating objects. They encapsulate data along with the code that operates on that data. Reference

To better comprehend the concept of a class, let's consider an analogy. Think of a class as a recipe for a cake. A recipe describes everything necessary to prepare a cake. Similarly, a class allows us to define all the components and behaviors an object needs to exist.

For instance, suppose we want to represent a Car using a class. A car requires properties such as color, factory, and maxSpeed. Additionally, a car can turn its lights on or off. In JavaScript, we can represent this as follows:




class Car {

    lights = false    

    constructor(color, factory, maxSpeed) {
        this.color = color
        this.factory = factory
        this.maxSpeed = maxSpeed
    }

    toggleLights() {
        this.lights = !this.lights
    }

}

In this example, the class Car defines a constructor function that receives the necessary data when creating an object. We also define a property called lights to represent the state of the car's lights (whether they are on or off). The toggleLights function, which is a method within the class, allows us to switch the lights on and off.

Objects

An object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. Reference

Let's build upon the previous example by creating an object based on the Car class:




const myCar = new Car('blue', 'VW', 300)

console.log(myCar.lights)
// false

myCar.toggleLights()

console.log(myCar.lights)
// true

To create an object from a class, we use the new keyword. Once the object is created, we can use it to interact with the defined properties and methods. In the provided example, the myCar object is created from the Car class, and we can access and modify its properties.

When we examine our myCar object, we can see that it displays all the properties defined within the class. Additionally, it has a special property called [[Prototype]], which indicates the prototype from which the object was created. In this case, the prototype is the Car class's constructor.

Prototype

Prototypes are the mechanism by which JavaScript objects inherit features from one another. Reference.

As shown in the previous example, an object is aware of its prototype, which serves as the template for its creation. In JavaScript, classes are built on prototypes, and we can determine an object's prototype using the Object.getPrototypeOf function.

To illustrate, let's console.log:

The prototype of our myCar object is the Car class. However, the Car class itself also has a prototype, denoted by [[Prototype]]. Since all classes are built on prototypes, the initial prototype in the chain is the Object class.

The Object class, in turn, has a prototype that points to null, which concludes the prototype chain.

Solving the leetcode problem

To determine if an object is an instance of a particular class, we need to check if the object's prototype matches the class's prototype.

In our previous example, we can achieve this by using the following code:



Object.getPrototypeOf(myCar) === Car.prototype
// true

Thus, we can conclude that the myCar object was created based on the Car prototype.

Edge cases of the problem

As we mentioned earlier, an object is created from a class, which, in turn, may be based on another class, and this chain continues until it reaches the Object class.

Consider the following code:



Object.getPrototypeOf(myCar3) === Object.prototype
// false

In this case, the result is false because we are not comparing the complete prototype chain. To properly check if an object is based on the Object class, we need to modify the code as follows:



myCar instanceof Car
// true
myCar instanceof Object
// true

Another aspect to consider is when dealing with primitive values. We must transform them into objects to determine their prototypes correctly. For example:



Object(2) instanceof Number
// true
Object('23') instanceof String
// true
Object(myCar) instanceof Car
// true

I hope this blog post has helped you gain a better understanding of JavaScript and its concepts. Feel free to follow me for more insights into the world of JavaScript.