DEV Community: ASAP_A1

All you need to know about CSP[Content Security Policy]

ASAP_A1 — Mon, 08 Jan 2024 10:46:23 +0000

Introduction

"While this sounds like some police and enforcement agency theories, I still want to know what or how this is of concern to me as a developer [especially a FE bettle]".
Relax okay, in this article I'll expose you to what CSP is, a couple of its advantages, and how to implement it in your next project.

What Is CSP

CSP? a short for Content Security Policy according to the Mozilla developer network is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross-Site Scripting and data injection attacks.

All these have to do with your site being exposed to vandalization, malware distribution, data leakage, and theft among others.

This is in most cases a line or two header directives that script your entire document as shown below. [don't worry there's not much code in this one]

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />

Also, compatibility could be a thing of concern on the CPS version 2 for some reasons, however, the V1 enables backward compatibility which means if it isn't compatible with your browser it falls back to a default same-origin policy [SOP if you like] and ignore anything to do with CPS, which is not so much of a good idea as it might allow hackers to subvert your systems.

What Examples of Threats Does CPS Address?

Alleviation of Cross-Site Scripting (XSS) Attacks:
XSS attacks have everything to do with malicious script injection into your web pages and hence the execution of the unwanted scripts in your[the user] browser. Examples of such attacks are spamming, phishing, or DDoS. CSP allows you[the owner] to decide your policy that specifies sources that are allowed to load scripts to your site.
Data theft prevention:
When CSP prevents the execution of unauthorized scripts, it also means that data theft is protected against or cut out entirely. Malicious scripts attempting to steal sensitive user data, such as login credentials or personal information, are restricted by the owner-defined CSP policy.
Alleviation of clickjacking:
Clickjacking happens when you click on something on a website then it performs something else or takes you to another place different from what you intended the click for. CSP headers can help prevent clickjacking by restricting which domains can embed your content in iframes.
Reduces the Impact of Cross-Site Request Forgery (CSRF) Attacks:
Even though CSP primarily focuses on alleviating XSS attacks, it can also help reduce the impact of CSRF attacks by preventing the execution of unauthorized scripts that might attempt to perform actions on behalf of an authenticated user.
Compliance with Security Standards:
When Content Security Policy guidelines are followed duly, it exposes a requirement for compliance with certain security standards and regulations, hence enhancing the overall security posture of the site or application.

Importance of CSP To A Developer

Implementation of Strict Policies:
Developers can specify strict CSP policies that limit the sources from which scripts, styles, and other resources can be loaded. This encourages a more secure coding practice by only allowing resources from trusted origins including owners.
External Dependencies Management:
Many web applications use third-party libraries and dependencies. Developers especially on the frontend need to consider the impact of CSP on the inclusion of external scripts and ensure that these dependencies comply with the defined security policies.
Setting CSP Headers:
Devs especially on the backend are responsible for configuring HTTP headers, including the Content-Security-Policy header, which defines the CSP policy for the web application. They need to understand the security requirements of the application and set up the appropriate CSP directives to mitigate potential security risks.
Safe Management of User Input:
User inputs are mostly handled by backend developers, and they need to ensure that data received from users is properly validated, sanitized, and encoded to prevent threats like injection attacks. A correct management[handling] of user input contributes to preventing security vulnerabilities that could be exploited via CSP.
Testing and Debugging:
Testing and debugging are important aspects of app or site creation and developers should test and debug their applications in environments with CSP enabled. This includes but is not limited to checking the browser console for CSP-related errors and ensuring that the application behaves as expected under the defined security policies.

Usecases/Implemmention of CSP

Most times and even all time XSS attacks leading to resource exploitation are caused as the result of the browser's inability to differentiate between trusted and malicious sources to download its resources.

For example, you're filling out and expected to submit a form that gets your image from https://icloudimageservices.com/images/my-photos which means that the URL is trusted and enabled to make supplies to the site, but the browser does not know if https://wickedboysassociation.killsite is the trusted one or the malicious source.

And your browser [cause using free WiFi or any enabling data transfer source] goes ahead and downloads everything from all these sources not minding if trusted or not, now posing a potential harm aforementioned.
To not allow this to happen the Content-Security-Policy is the main HTTP header to specify the precise and allowed sources to make content supplies to the site by giving the browser the rendering or execution permission.

Use case 1: Allowing self/other sites for scripting

One thing to note is, that the fact that you are the writer of the policy intuitively means that you are the owner of the site and hence a need to allow your content on the allowed list, and this is how you set yourself in. [ Remember https://wickedboysassociation.killsite & https://icloudimageservices.com/images/my-photos ]

Content-Security-Policy: script-src 'self' https://icloudimageservices.com/images/my-photos

The above shows us how we can set the allowed site to supply us with anything that relates to (Java)script execution on the site with the keyword script-src enabling https://icloudimageservices.com/images/my-photos to make script actions and the 'self' means you allow yourself to be a script supplier too.

There are up to four types of source directive keywords and they include.

'none', which matches to nothing.
'self' as explained, it sets the origin to the current one [excluding the subdomian].
'unsafe-inline' permits scripts from JavaScript and styles from CSS in an inline code.
'unsafe-eval' text-to-JavaScript tools like eval() , are permitted

Use case 2: Allowing all Sources

You[an admin] want to set a site and all its subdomains as the primary origin to supply contents to the site, remember this doesn't bond to what is set on the CSP, [https://icloudimageservices.com/images/my-photos] in our case.

Content-Security-Policy: default-src 'self' alldomainsite.com *.alldomainsite.com

Hence default-src allows all contents from your site and alldomainsite.com, and all its subdomains as the default.

Use case 3: Allowing only Secured Sources

You want to make sure that all contents and resources are downloaded from trusted and only secure channels and not having to go through long third-party hard-to-understand code implementations.

Content-Security-Policy: default-src 'self' https://alldomainsite.com; 
script-src https: 'unsafe-inline'; 
style-src https: 'unsafe-inline'

Even though the default-src is set as https://alldomainsite.com, it does not have any supply obligation to the site that will supply the script and the styles, they all would mind their specifications based on set directives.

Reporting

We can generally say that CSP is a big savior to threats we might experience from untrusted client-site, however it is of great importance and needs to monitor and get a response sent back showing all the possible causes[bugs] that led to the malicious injection in the first place and hence destroying it.

Hence you can make a POST request that will send back a report to the specified report-uri in your directives.

Content-Security-Policy: default-src 'self'; report-uri /asap_csp_report_parser;

And the following report response is expected.

{
    "csp-report": {
    "document-uri": "http://wickedboysassociation.org/page.html",
    "referrer": "http://wickedboysassociation.killsite.org/",
    "blocked-uri": "http://wickedboysassociation.killsite/evil.js",
    "violated-directive": "script-src 'self' https://myallowedsiteonly.com",
    "original-policy": "script-src 'self' https://apis.myallowedsiteonly.com; report-uri http://reports.org/asap_csp_report_parser"
    }
}

NOTE:

It is advisable that the CSP directives are set in your HTTP header, nonetheless, you can still set the page policy directly in your project with the <meta> tag and the http-equiv attribute.

<meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'">

Conclusion

In this article we have learned what CSP is, and how it is beneficial to developers' projects and users' data, we have learned major ways to implement it in our next project and we can now feel like heroes to threats like XSS (Cross Site Scripting) attacks, clickjacking, Cross-Site Request Forgery (CSRF) among others.

Please share If you find this helpful thanks!

Getting started with Finite State Machine using X-state.

ASAP_A1 — Mon, 17 Apr 2023 07:14:12 +0000

Introduction

State management in a developer's journey can be hell and bliss, and this depends on the library one chose and how well he grasps the logic behind it right? I must say using a state manager never got better when you can visualize your code logic and decide the kind of beans you're cooking.

In today's session, I'll show us how spectacularly the X-state machine works in practice, and how generously it can make your experience in development worthwhile.

What is a Finite State Machine

The finite state machine can be seen as a mathematical “model” that performs a certain computational activity that assumes an initial state and spins through different[specified] states and back to the normal [accepting state]...
More explanation can be found in my previous article "The finite state machine"

What is X-State

Unlike redux, recoil, Zustand, and a million others, X-State is a library that helps you create finite states, have a visual interpretation, and also execute the logic seamlessly where for instance you will not have to wrap your whole app in a provider, store something or dispatch anything. It's just easy to use and maintain. you can find more explanations here

Getting Started

In this guide we will start by learning how to make a simple dark/light mode, and furtherly a traffic light for our react application all from scratch.
You can find all the working code here on my Github.[drop me a star thanks!]

Setting up

We need to create our app to run this so let's run this;

yarn create react-app react-xstate-finite-machine

npx create react-app react-xstate-finite-machine

Moving forward, we add the xstate package to the app;

yarn add xstate @xstate/react

Let's run our app yarn start or npm start[if you are using npm to setup], while our app is building.

Create a file with the name you wish and that is where we will initialize the state like so;

import { Machine } from "xstate";

export const switchThemes = Machine({
  id: "themes",
  initial: "light",
  states: {
    light: {
      on: { SWITCH: "dark" },
    },
    dark: {
      on: { SWITCH: "light" },
    },
  },
});

Break down

id: just like any state manager it is the name of the name assigned to the state.
initial: that's the [initial]assignment name to the state we want to work with.
states: this is the area we're the state recide.[light&dark]
switch & on: that is what we use to fire the action of switching the themes.

ShowTime

Now it's time to visualize the beans we have been cooking, and x-state provides us with a tool called the visualizer which will show us how our state will logically work.

Now you can see that the logic circle began from the initail state of light and when a switch is invoked it'll change back to dark. Nicely yhh?

Back to our code, we would like to see our state in action, so we call our state component to App.js, also in order for the state to function fully we have to call the useMachine hook from the x-state library and we should have something like this.

import "./App.css";
import { useMachine } from "@xstate/react";
import { switchThemes } from "./states/darkLightSwitch";

function App() {
  const [current, send] = useMachine(switchThemes);

  const handleSwitch = () => {
    send("SWITCH");
  };

  return (
    <div
      className={
        current.matches("light") ? "light-theme body" : "dark-theme body"
      }
    >
      <button onClick={handleSwitch}>
        {current.matches("light") ? "light" : "dark"}
      </button>
      <h1>{current.matches("light") ? "Light Turnels" : "Dark Moments"}</h1>
    </div>
  );
}

export default App;

NB the light-theme & dark-theme are my CSS classes and they are in their separate folder.

Exciting, isn't it? Now let's get even deeper.

Traffic Lights

Having learned how to add themes to your app why don't we go deeper yeah?
Our traffic lights will assume this looks for now;

We will add a traffic light system into the app and follow prior setup guides for the dark & light the theme, we will be having our trafficking[excuse my french] light state like so;

import { createMachine } from "xstate";

export const trafficMachine = createMachine({
  id: "trafficLights",
  initial: "stop",
  states: {
    stop: {
      on: {
        NEXT: {
          target: "ready",
        },
      },
    },
    ready: {
      on: {
        NEXT: {
          target: "go",
        },
      },
    },
    go: {
      on: {
        NEXT: {
          target: "stop",
        },
      },
    },
  },
});

Yet again visualizer to confirm our act;

Moving forward we will call the state in our application and this time around we will be using our darling useEffect to set our timer for the traffic light action, and the entire code should look like this;

import "./App.css";
import { useEffect } from "react";
import { useMachine } from "@xstate/react";
import { switchThemes } from "./states/darkLightSwitch";
import { trafficMachine } from "./states/trafficControlState";

function App() {
  const [state, send] = useMachine(switchThemes);
  const [current, push] = useMachine(trafficMachine);

  const handleSwitch = () => {
    send("SWITCH");
  };

  useEffect(() => {
    let trigger = () => {
      push("NEXT");
    };
    let timer = setInterval(() => {
      trigger();
    }, [3000]);
    return () => clearInterval(timer);
  });

  return (
    <div
      className={
        state.matches("light") ? "light-theme body" : "dark-theme body"
      }
    >
      <div className="container">
        <button onClick={handleSwitch}>
          {state.matches("light") ? "light" : "dark"}
        </button>
        <h1>{state.matches("light") ? "Light Turnels" : "Dark Moments"}</h1>
      </div>
      <div>
        <ul className="light-container">
          <li className={current.matches("stop") && "red"}>
            {current.matches("stop") && "STOP"}
          </li>
          <li className={current.matches("ready") && "yellow"}>
            {current.matches("ready") && "READY"}
          </li>
          <li className={current.matches("go") && "green"}>
            {current.matches("go") && "GO"}
          </li>
        </ul>
      </div>
    </div>
  );
}

export default App;

You will notice the call of useMachinehook twice, now that's because x-state will not allow you to call more than two actions to the function like our normal useState wouldn't.

Check out the app in different modes.

Voilà we have our genius mode activated yhh, do well to share with others. Merci beaucoup!

How to use react-to-print in react.js

ASAP_A1 — Sat, 01 Apr 2023 05:43:58 +0000

Hi, y'all this is probably the simplest way to go when you're trying to add a download page functionality in react.

In this article, I'll be showing you how to implement pdf downloads from your react project using either class or functional components.

Installations

I assume you have your react project installed.

Now go ahead and add the packages

yarn add react-to-print

npm i react-to-print

Using functional components

Now we can go to our App.js component or any file you intend to use and import your package like so.

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

const App = () => {
  const componentRef = useRef();

  return (
    <div>
      <div ref={componentRef}>This contains all the files you intend to export[download]</div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
      />
    </div>
  );
};
export default App;

Voila! However, you might want to be passing the component from another file, then you'll have to pass the ref as a prop.

Using class component

Following the same method as the first approach, go to your desired file and follow the technique below.

import React from "react";
import ReactToPrint from "react-to-print";

class App extends React.Component {
  render() {

    return (
      <div>
        <div ref={(refer) => (this.componentRef = refer)}>Export my HTMl component to a PDF File</div>

        <ReactToPrint
          content={() => this.componentRef}
          trigger={() => (
            <button className="btn btn-primary">Print to PDF!</button>
          )}
        />
      </div>
    );
  }
}

export default Appp;

Note when using an external file you'll just have to pass the ref directly into the component you're calling like so <ImportedComponent ref={(response) => (this.componentRef = response)} /> and yeah you're all good to go.

You're welcome.

THE FINITE STATE MACHINE

ASAP_A1 — Sun, 25 Sep 2022 20:26:31 +0000

Introduction

As developers, we often make automation that requires changes from the end user or following conditions we set our programs to run, and in doing so we are making initializations that are ruled by the Finite state machine. This is applied mostly in programming and can also be used in different areas like mathematics, artificial intelligence, design of digital systems, compilers, computational linguistics, and the list goes on.

Today we will learn precisely how it works as well as its variations.

What is a Finite State Machine?

The finite state machine can be seen as a "model" that performs certain computational activities which assume an initial state and spins through different[specified] states and back to the normal [accepting state]. This machine can be used to manipulate computer programs[talk about serialization and logical expressions], which require hardware and software manifestations.

The finite state machine[FSM] is never complete without the recall of its Computer science origin under the topic of 'Automata theory'. Automata[as plural], automaton in singular, in the light we can call the FSM, Finite State Automata-FSA [which I prefer].

Remember I talked about Turing completeness in my Ethereum Virtual Machine article, which pointed out how the EVM is Turing complete, and if a machine is 'Turing complete' it is said to perform all types of computational manipulations, which arguably makes it an infinite state machine. On the other hand, every other state machine that does not solve all computational problems is said to be Turing incomplete.
NB Turing machine > FSM.

Generally, the finite state machine is capable of receiving an action [instruction] that will lead to a change in the state.

Types of FSA

There are two types of Finite state automata namely;

Determinitic Finite Automata [DFA]
Non-Deterministic Finite Automata [NDFA or NFA]

DFA

Oh yeah, it can also be called a Deterministic Finite Acceptor, which takes defined strings of symbols that determine if the Finite machine rejects or accepts, hence running through the sequence of strings and giving out exactly what the symbol of the finite machine states.

The DFA is defined by a 5-tuple element; Q, ∑, δ, q0, F all with a unique definition. Wanna know more follow here.
Remember mortal combats yeah, '>><<Z' [forward forward back back z]? haha, now this combination satisfies the state[brutality] in the DFA of a particular character, hence when completed will execute the action behind it. Chin ching ;-)

This image displays deterministic finite automation that accepts only the alphabet[a,b,c,d] with of multiple of 4, having the initial state S1, and S4 as accept state. This means that the string "abaac" leads to the state sequence S1, S2, S1, S2, S2, S4 and is hence accepted.

NDFA

Unlike the DFA this can move to any combination in the machine sequence without having any strict bounds as to happen or not, this means that it can have more than a transition function. It accepts input strings provided that it has a compatible space matching the string in the final[accept] state.

Now, this diagram can accept all combinations that will lead to it ending on the acceptance state, hence number combinations like [0, 1, 101, 1001...] are welcomed cause they end at the accept state of 'd'. And also combinations like [1, 01, 10, 0110...] cannot be accepted obviously. This is actually termed better cause it actually saves time, accepts null values, and does not take too many state and transitions to complete execution.

Application of FSA

Light Switch

State: On or Off
Transition: The state 'on' changes when the state 'off' is applied

Elevator

State: Static, Dynamic
Transition: When the floor number is pressed it changes from the static state to its dynamic state hence taking the user to the desired floor and back to the static state.

ATM Machine

State: Dispense, Static, Sing...
Transition: The machine changes its state if conditions for withdrawing are 1k met from static to dispense or sing some motivational songs to a broke user.

Conclution

The state machine act as a wardrobe in that you keep your party, burial, and dating clothes, and when the mood is triggered according to your outfit you go ahead and put them on, hence changing the state of your dressing.

Never will I go without saying thank you for scrolling to the end, I know a lot people are waiting for you to share this so they can scroll to the end and give thumbs up too, and might even say something we want.

Macho Garcias!

Writing Front-End Test with Jest

ASAP_A1 — Fri, 02 Sep 2022 02:59:56 +0000

What is Front-End Testing

Front End testing is a systematic way of scrutinizing your application's inner & outer workings. This action ensures all views and functionalities adequately carry out their purpose and look like what they should[talk about pixel perfection in a functional context].

There are different types of testing in front-end, among which includes Unit testing, Visual regression, Performance testing…

In this tutorial, we'll be carrying out Unit testing, which checks that the functionalities across components work as expected, and we will be making use of Jest as a tool to carry out the test.

Pre-requisite

It does not require more than having your latest node.js software installed and a working keyboard.

Testing Testing 123...

I will be using my already created vite application. See the tutorial here.
On the other hand a create-react-app solves it here;

yarn create-react-app my-first-test

If you already have a project, you'll only have to add the react-test-renderer package in order to show us our snapshots

yarn add react-test-renderer

Moving forward, we will be making use of babel-react and react babel will help us to transform it into the test environment hence;

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react

After that your package.json should look like this. Mine might be more code cause, like I mentioned is an inherited[existing] project.

Create a babel.config.json file and add this;

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    "@babel/preset-react"
  ]
}

Voilà!

Now it's time to make our Snapshot Test...

Let's test if our reusable button component works as we want it. Our Button.js the component should be like this;

import React, { useState } from "react";

const ACTIONS = {
  CLICKED: "clicked",
  HOVERED: "hovered",
  NORMAL: "normal",
};

const PrimaryButton = ({ children, variant }) => {
  const [actions, setActions] = useState(ACTIONS.CLICKED);

  const onClick = () => {
    setActions(ACTIONS.CLICKED);
  };
  const onMouseEnter = () => {
    setActions(ACTIONS.HOVERED);
  };
  const onMouseLeave = () => {
    setActions(ACTIONS.NORMAL);
  };

  return (
    <>
      <button
        onClick={onClick}
        variant={variant || "primaryButton"}
        className={actions}
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
      >
        {children}
      </button>
    </>
  );
};

export default PrimaryButton;

Supper chill, yeah?
Next, we will create a file called Labs.test.js, in this file, we'll be using our React renderer and Jest snapshot feature to interact with our components capturing the rendered snapshot as output and appending it to a new snapshot file.

import React from "react";
import renderer from "react-test-renderer";
import PrimaryButton from "./Button";

it("it triggers the follow up functions when clicked", () => {
  const component = renderer.create(
    <PrimaryButton variant={"primaryButton"}>SignIn</PrimaryButton>
  );
  let primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();

  //triggering click act
  renderer.act(() => {
    primaryButton.props.onClick();
  });
  //comparing Org
  primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();

  //triggering enter act
  renderer.act(() => {
    primaryButton.props.onMouseEnter();
  });
  //comparing Org
  primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();

  //triggering normal act
  renderer.act(() => {
    primaryButton.props.onMouseLeave();
  });
  //comparing Org
  primaryButton = component.toJSON();
  expect(primaryButton).toMatchSnapshot();
});

Now on your CLI run yarn test or yarn jest and expect this output;

Hence aforementioned, a file __snapshots__/Labs.test.js.snap will be created automatically and have the following snapshots.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`it triggers the follow up functions when clicked 1`] = `
 <button
  className="clicked"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

exports[`it triggers the follow up functions when clicked 2`] = `
<button
  className="clicked"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

exports[`it triggers the follow up functions when clicked 3`] = `
<button
  className="hovered"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

exports[`it triggers the follow up functions when clicked 4`] = `
<button
  className="normal"
  onClick={[Function]}
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
  variant="primaryButton"
>
  SignIn
</button>
`;

Finally, when you eventually make a change to your component, you'll need to update the test suit to capture the changes. If not, you'll get errors thrown at you. Therefore, run yarn jest -uto resolve that.
Thank you for following up on this tutorial. If you find or think it might help someone, do not hesitate to share.
Gracias Macho!

Using Vite on an existing React project

ASAP_A1 — Wed, 27 Jul 2022 09:45:00 +0000

Just incase you're wondering how to boost your dev server if you already got a project up and running with our beautiful react application, here I will show you how to infuse Vite into your project and experience that speed you've always wanted.

Also if you are wondering what is Vite and probably want to use it, you can checkout my last tutorial on 'How to use Vite with React'

Without no further a do...

What you need to have in check.

A running react application
A good network

Then

Setup the required packages from you terminal like this

$ yarn add vite @vitejs/plugin-react-refresh

Create a vite.config.js file in your root folder and add the following code

// vite.config.js

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

export default defineConfig({
  plugins: [reactRefresh()]
})

This config file pre-bundles your dependencies when sever is running.

From your root folder too, edit your package.json. This define the bundler for starting, building and previewing the application from the initial react-create start...

// package.json

  "scripts": {
    "start": "vite",
    "build": "vite build",
    "test": "vite test",
    "eject": "vite eject"
  },

Still from your root folder, open /public folder and move the index.html file to the parent folder.
In the file, go ahead and remove all the %PUBLIC_URL% attached too any <link.../> and a <script> tag and hence reference to the appropriate directory like so /src/index.js/.

<!-- Before edit -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<!-- After edit -->
...
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />

<body>
...
    <div id="root"></div>
    <script type="module" src="/src/index.js"></script>
</body>

Finally

You can now run

$ yarn start

Happy vite coding.

How to use Vite with React

ASAP_A1 — Mon, 25 Jul 2022 11:44:00 +0000

Hi guys, I am your captain on this ship, and I'll be showing you typical steps to take your dev server and bundling speed to a distance farther than Mars and faster than Space-X falcon 9.

Vite, pronounced /vit/[veet], a French word, is a frontend tool for web development. It is yet the fastest dev server that bundles your code with Rollup module, and can be used with different frameworks like Vue[js/ts], Vanilla[js/ts], Preact[js/ts], Svelte... but we'll talk about
react.js now.
Just in case you wonder how fast it is in comparison with the native CRA[create react app], check out the visual explanation here.

Vite uses esbuild for pre-bundling dependencies and reduces the number of browser requests as it is said to be a native ESM [ECMASCRIPT Module], so it handles the conversion of CommonJs to ESM. One fascinating thing about it is that it supports SSR, where it provides APIs to efficiently load and update ESM-based source code to Node.js during development.

Prerequisite

If you want to enjoy this good stuff, you should at least have all of the following installed and a bit of familiarity on usage with...

Node.js package manager from at least version 14.18.0, or download here.
Yarn package manager[my preference] from at least version 1.22.0 or download here
Knows how to use HTML/CSS and a little bit of react.

Initialization

Run the following command in your terminal

$ yarn create vite

This command will configure the necessary tools to scaffold React applications in the local environment.

This output will prompt you to set up your project.

You'll notice I saved my project name as asap-vite-project. Well, you can save it with any name of your choice.

After that, vite will prompt you to choose what framework you like. In this tutorial, you'll select react.js

Remember I mentioned you could use either Typescript or Javascript for vite; hence in the following prompt, we'll select `react because we are using Javascript language, not Typescript, for this tutorial.

As soon as we're done with that, vite is gonna scaffold the project, and it'll ask us to install our dependencies with yarn like so...

As directed above, we will navigate our current directory as so.

$ cd asap-vite-project

Then type yarn to install the required dependencies like so;

 $ yarn

This part is pretty much interesting,
Now, after all these files are installed, tell me how long it took before it was completed. Mine says...

Starting server

So the essential work has been done, and this step pretty much takes us to the primary usage part hence.

While still in the asap-vite-project directory run the following code

 $ yarn dev

What this command does is that it runs the project in development mode.

It'll yield this output...

As indicated, go ahead and open your browser and search on your local browser the address specified; on mine, it runs on http://localhost:5173/

Conclusion

And now you are fully in the ever blazing, faster than falcon 9 coding environment, and you can use your react app just like in any other yarn or npm application, except this is just in an elite mode...

And a big shout to my very smart guy Lord Sarcastic for inspiring me to write this piece[he writes awesome stuffs too. Also, big ups to you for taking a timeout on this tutorial, be free to share it with anyone it'll be of benefit to.

Namaste!