Forem: Ryan Kuruppu

Arc you glad you met me ?

Ryan Kuruppu — Sat, 09 Dec 2023 10:53:47 +0000

This isn't a tech article, this isn't a rant about the next JavaScript framework, this isn't even about the fact that I'm finally on break and I was so bored I decided to write about something I totally love.

This is about the new kid on the block.

The block which has been dominated by Google for the last millennia (yes, I know what a millennia means but exaggeration makes for content).

I'm talking about Arc by TheBrowserCompany.

The latest little big boy that's taking the browser market by storm.

Now now, don't be put off by the colors.

The Arc team is way more talented than me at writing stuff like this but here I am raving on about it anyway (btw if being an Arc supporter is a cult, I guess I'm an "arc-anist" hehe get it ?... ANYWAY

I'm just gonna list some of the things I love so hope you're enticed enough to use Arc yourself 🙌🏼

A few things to mention

So right now, The Browser Company have only released the Arc browser for MacOS as of right now.

The Windows Beta is currently live an in testing. You can sign up for that here

The mobile app is currently being reworked but they have a mobile companion which is available on the App Store but I would personally wait for the new and improved one to come out.

But, if you are on Mac and you wanna give it a try, here you go !
https://arc.net/

1. Theming 🎨

One of Arc's lovely features is the ability to theme your browser to your liking. From the color of your windows to the applications that you use on the browser itself (yes, you can change your application's colors, we'll get to that in a bit)

Yes I know that other browser's have it too. But Arc's theming blends really well with the rest of the UI in a way that's really pleasing to the eye.

Arc provides this with a nifty little color swatch you can drag around till you find the color you want to daily drive.

So go ahead my fellow procrastinator, put aside your work and spend 3 hours finding the right color for you Arc window! Cause I know I couldn't stop playing with that damn color swatch.

2. Workspaces 🗂️

Now what point is there in theming your windows if all of them are just gonna be the same color?

Introducing Arc's workspaces!

If you've used multiple profiles on Chrome or Edge, every time you open one of them you end up having a bunch of windows which you have to move through and find just to get the window with the right profile.

Now the biggest issue I've always had is that I've needed to consistently alt tab between apps or have to look really close to figure out what window I have open. Yes themes did help but when you liked a certain color across all your windows it became more of a hassle to set them up in a way you could figure out what was what.

Arc's workspaces are similar to profiles but the difference being that they are actually independent from the profiles you create.

So you could have

1 space per profile
Multiple spaces using the same profile

So how do you tell the difference ?

Well it's a combination of naming and theming.

For example, this is my Personal workspace.

It's purple, has the name Personal with a nice lil logo.

And this is my "work" workspace.

It's gray, it's named Development and also has a logo that I can use to differentiate it

They each have their own histories, cookies, saved logins etc.

Pretty neat 🥸 and just before you ask me "what makes that such a big deal ? I still have to find the workspaces 😩"

Yes but no.

You can just slide between them 🤩

But let's say you don't like that.

You can use the icons at the bottom of the side bar to switch too !

You can even use control + 1 or control + 2 (on Mac) to switch if you like shortcuts (the number is the order of your workspace)

Now, in case even THAT wasn't "for you"

Arc offers another way to switch workspaces, which also happens to lead me to the next feature I think is just an absolute win!

3 The command/action bar

TLDR;
Think spotlight on Mac, but for the browser 🤩

Spotlight on Mac is a magical feature which lets you run actions, search for files, apps and even sites.

The amazing people at TheBrowserCompany managed to take this little piece of heaven and put it into Arc.

I love calling this the "Arc Spotlight Search" just because it sounds right!

Wanna focus on a specific workspace ? Just type Focus on <name-of-your-workspace>

But now now, don't think the Spotlight search is just for switching workspaces.

You can still do your normal google searches

But you can also run "actions"

What do you mean actions???

I mean ACTIONS

Simply press Tab when the spotlight search is open.
This opens up a list of actions that your browser can do like,

Refreshing the page
Creating a new space
Archive a tab
Open notes (yes, notes)

And on top of all that ?

Yes. ChatGPT in your search bar 🙌🏼

Okay I'm getting excited just talking about all this.

4. Boosts

Okay okay, now out of the number of features I could be talking about, this one is one of my personal favorites but it might not be for everyone.

So remember how I said at the start that you could even theme your applications? Take a look carefully at the very first image in this blog.

That's not how Spotify looks isn't it?

This is enabled by a lovely little feature called boosts in Arc.

It's a feature which allows you to "permanently" change the theming, look and feel of the sites you visit more often.

This is all done with the Boost Side Panel

Just playing with the swatch, allows me to change a site like YouTube from this.

To this

Pretty cool isn't it ?

Okay now there are a lot more cool features like

1.The in-built notes app

2.Split Views

3.Easels and Mood-Boards

But I'm going to leave that to your curiosity to try.

Here's a few I haven't even touched on yet:

(Arc Max)[https://arc.net/max]
The types of Tabs in the Side Panel
(Smart Screenshots)[https://resources.arc.net/en/articles/8411618-how-do-i-take-a-screenshot-in-arc]
(Air Traffic Control)[https://resources.arc.net/en/articles/7670020-air-traffic-control-route-links-to-the-right-space-automatically]
Site Search (yes its in other browsers, but it's just nicer in Arc)
(Folders)[https://resources.arc.net/en/articles/6449566-folders-stash-similar-tabs-together]
(Pinned Tabs (and the amazing Tab Reset feature))[https://resources.arc.net/en/articles/6449654-pinned-tabs-tabs-you-want-to-stick-around]
Portrait Mode
Quoted Links
Workspace/Folder Sharing

Arc is such a promising browser and a lot of people have asked me why I don't ask them for sponsorship at the rate I talk about them (as a joke of course). I have just been waiting for a browser like this that keeps me interested in using it for more than just what I use a browser for. The integration, the ease of use and simplicity is just incredible.

It's like waking up to Christmas every Thursday (cause they usually release updates on Thursdays). Arc does the little things right and I honestly want nothing but a better browser for everyone and this is the biggest step I have seen in that direction.

They have a long way to go but if they keep doing what they're doing I have no doubt in my mind they will be the browser to beat!

So keep it up Arc! Can't wait to see what you have in store!

React Hooks (useEffect)

Ryan Kuruppu — Mon, 15 Feb 2021 20:52:12 +0000

🔖 Table of Contents

The Task
Setup
Adding the useEffect hook
Structure of the useEffect hook
The dependency array
Example with dependencies and cleanup

So this section of the tutorial is going to speak about the useEffect hook. What it is, how it works and how it fairs compared to the existing 3 class functions given to use by React.

❗ Just for your Information

I won't go into too much detail and I'm going to keep this brief to a point where it'll make sense but I do suggest that after you finish this tutorial. Read the links I attach below for a deeper understanding especially the explanation by Dan Abramov the creator of React.

There's a bit of reading here but bare with.

What is the useEffect hook?

The useEffect hook is a replacement for 3 of React's class-based lifecycle functions namely,

componentDidMount
componentDidUpdate
componentWillUnmount

As of React 16.8 and React Native 0.59, the useEffect hook combines all 3 of these functions into one single function with a cleaner and concise look.

Just like the 3 earlier functions, you would do side effects like Data Fetching, Subscriptions etc. from within the useEffect hook(s)

Note how I said "hook(s)" with an s.

That's right! Your functional component can have multiple useEffect hooks to handle different actions within your code.🎉🎉

So how is this gonna work?

First I'm gonna describe the task we'll be using to demonstrate the useEffect hook then we'll go through the useEffect hook and its structure and we'll initially write the component in a class component so you understand how it works (also so the beginners understand if any). Then finally we'll talk about the pros and cons of using it compared to your usual class functions.

So lets get started.

The Task

We'll keep it simple. Sweet. Like Music 🎵

We're simply going to use the site JSON placeholder to generate some random Post (comments, username etc.) data for us and we're going to pull that into our component using class lifecycle functions first and then hooks and display it in our page.

After this. We're going to demonstrate another use case where we'll be attaching an event listener to our component to monitor the scroll position. This will help us understand the cleanup dependencies a little better.

Let's start writing.

We'll start by laying down the foundation for our component. So we'll use our App.js file which comes by default in create-react-app

Just make sure your App.js file looks like this.

React from 'react'

class App extends React.Component{
    render(){
        return <div></div>
    }
}

export default App;

Let's use a state variable like in the previous tutorial to hold all our posts.

  React from 'react'

  class App extends React.Component{
+    constructor(){
+        this.state = {
+            posts = []
+        }
+    }

     render(){
        return <div></div>
     }
  }

  export default App;

Now let's fetch the data from JSON Placeholder using ComponentWillMount

React from 'react'

class App extends React.Component{
    constructor(){
        this.state = {
            posts = []
        }
    }
+
+   componentDidMount(){
+       fetch("https://jsonplaceholder.typicode.com/posts")
+           .then((response) => response.json())
+           .then((data)=>this.setState({posts: data})
+   )}
+
    render(){
-     return <div></div>
+     return( 
+         <div>
+          {posts.map((p)=>{
+             return (
+                  <div key={p.id}>
+                    <h1>{p.title}</h1>
+                    <h4>{p.subtitle}</h4>
+                  </div>
+              )
+          })}
+          </div>
+     )
   }
}

export default App;

Normal so far cause well.. this is how you'd write it in the "Pre-Hook" Era.

With this you should be able to successfully get data from the frontend.

Now lets start changing things up

So lets start by changing up the component and it's state to a hook based state like the previous tutorial

import React, {useState} from 'react'

function App(){
  const [posts, setPosts] = useState([]);

  return(
    <div></div>
  )
}

Next lets introduce the useEffect hook.

The useEffect hook, like I stated before. Has 3 important parts. This short example will use just 1 part. The Action which in our case is the fetch request for all the posts.

So let's add it and display them.

+ // Import useEffect
 import React, {useState, useEffect} from 'react'

  function App(){
    const [posts, setPosts] = useState([]);

   //Add the useEffect.
+   useEffect(()=>{
+      fetch("https://jsonplaceholder.typicode.com/posts")
+        .then((response) => response.json())
+        .then((data)=> setPosts(data));
+   },[]);

    return (
-     <div></div>
-   );
+   return(
+     <div>
+       {/* Render Posts */}
+       {posts.map((p)=>(
+           <div>
+             <h1>{p.title}</h1>
+             <h4>{p.subtitle}</h4>
+           </div>
+       )}
+     </div>
+   )
+ }

✨And thats it !!✨

So let see what we exactly did with the component.

The useState hook is similar to what we did in the previous tutorial.

The useEffect is the new part here for us.

Let's see how it works.

The Structure

The callback function (A function which is passed as an argument to another function) is the first argument of the useEffect hook.

It is inside this function that we define our side effect, data fetching calls, subscriptions or listeners. It runs after the component renders so that the component render isn't blocked by the code running within the hook.

Nothing much to explain there

The thing we SHOULD notice is the second argument

The Dependency Array 😵

What the heck is a dependency array? You may ask.

The dependency array as the name says, is essentially a list of variables that your component will "watch" for changes in.

When a variable in the dependency array changes, your component will save a snapshot (temporary copy) of your component state and make a new call to the callback function you created inside your useEffect hook essentially leading to a rebuild of you React Component.

The dependency array is an optional argument and you can omit it but you can also include as many dependency variables as you like. But be smart about it.

However, even though the dependency array is optional. Leaving it out will cause an infinite loop of function calls.

Try it out and see what happens by copying this useEffect into your function and running it.

useEffect(()=>{
    console.log("Hello");
});

You'll notice that in your console. You'll end up causing an infinite loop. This is really confusing which is why I urge you to read this article by Dan Abramov which I've listed at the end of the tutorial as well.

Cool. That's fine. So then why does our example above have an empty array? (snippet is below this)

useEffect(()=>{
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data)=> setPosts(data))
},[]);

Well, simply put. Providing an empty dependency array tells React to only run this specific useEffect hook ONLY on the FIRST Render of our component. This is when the component is mounted into the DOM essentially replacing our componentDidMount function.

Okay so how do I update the UI using useEffect?

Since you hopefully understood how the useEffect works theoretically. I'll show you the second example I mentioned here

We'll create a component that monitors the scroll position of the UI using useEffect and useState.

We'll also go through the "clean up" part of the useEffect hook and what it does.

import React, {useEffect, useState} from 'react';

function ScrollWatcher(){

    const [offsetValue, setOffsetValue] = useState(0);

    useEffect(()=>{
        window.onScroll = function(){
          setOffsetValue(window.pageYOffset);
       }

       return ()=>{
           window.onScroll = null;
       }
    }, [window.pageYOffset]);

    return (
       <div style={{height: "1000vh"}}> 
           {offsetValue} 
        </div>
    )

}

So just to describe what we've done here.

When the component mounts, we tell our useEffect hook to add a listener to the window scroll event and update the state.

The points of interest here are again,

The Dependency Array
The return function

The dependency array now has the window.pageYOffset variable added to it. What this means is that whenever the window.pageYOffset value changes. The useEffect hook will re-run and update the offsetValue state variable.

The return function here is the action we will carry out when the component is about to unmount. This is the reason we call it the "clean up" function. This is where we will remove any subscriptions or listeners attached to the component or its variables.

And thats it. It wasn't much of an explanation but hopefully you got the gist of it. Just some final tips before I suggest some articles you should definitely have a look at.

Tips

You can create multiple useEffect hooks. One for data fetching one for subscriptions for example.
If you create multiple useEffect hooks, note that they are executed in the order they are written.
Read as much as you can about the useEffect hook to better understand how this works. It can save you the world of time when debugging your code.

Other than that,

Hope you enjoyed !😊

Let me know what you think in the comments below !

Read my tutorial on the useCallback hook (Will be added in the future)

React Hooks (from Class to Functional)

Ryan Kuruppu — Sun, 14 Feb 2021 14:24:55 +0000

This tutorial will guide you through what React Hooks are and the main changes you'll need in order to shift your React components over from Class Based Components to Hook Based Components.

The tutorial is broken down into separate pages to make sure that everything isn't clunked up together

🔖 Table of Contents

Pre-Requisites
What are Hooks
useState Hook
useEffect Hook
useMemo Hook (To be made)
useCallback Hook (To be made)

Pre-Requisites?

Just make sure your React Version is 16.8 or higher.

If you have react globally installed just check the version by using,

npm ls react-native -g

Or check your package.json if you already have a existing project.

What are Hooks ?

React hooks are new way of using state and other react features without the need for classes. They stem from the old React way of writing stateless components using normal functions and add features on top of it so that you don't need to write JavaScript(or TypeScript) classes anymore for the features (like stateful components) given to us in React.

What hooks are we going to look at

There are 10 hooks given to us by React. But we'll be discussing the more commonly used hooks as well as how to use props in React functional components just in case you're new to using functional components as a whole.

useState
useEffect
useMemo
useCallback

You can check out the other hooks provided by React from the docs

Functional Components

Let's take a quick look at functional components before we head into the hooks.

Functional Components in React were initially only used to describe stateless components. Even with the introduction of hooks they can still be used as stateless components by simply leaving out the useState hook from the component.

Here's what a stateless component looks like in React.

import React from 'react'

function Button(){

    function someFunction(){
        //...some code
    }

    return <button onclick={someFunction}>Click Me</button>
}

export default Button;

Pretty simple.

But now lets convert this to a stateful component by incrementing a number inside the button whenever it's clicked.

Prior to React 16.8... this is how you would do it.

import React from 'react';

class Button extends React.Component{
    constructor(){
        super();
        this.state = {
            counter = 0;
        }

        this.increment = this.increment.bind(this)
    }

    increment(){
        this.setState({
            counter = this.state.counter + 1;
        })
    }

    render(){
        return (
            <button onClick={this.increment}> 
                {this.state.counter} 
            </button>
        )
    }
}

export default Button;

As you can probably see

There's quite a bit of boiler plate code including somewhat unnecessary lines like

this.increment = this.increment.bind(this)

Which can lead to a lot of code pollution as the project gets bigger 😤

Hooks to the rescue 😌

So we need to change this class component (called Button) into a new functional component using React's hook implementation.

Enter the useState hook. 💥

useState Hook

The useState hook is a function that takes in one optional parameter and returns two values.

The optional parameter is the initial state.

The returned values are,

The State Variable
The setState function for that state variable

in the form of a destructured array.

It looks like this.

const [stateVariableName, setStateVariableName] = useState(initialState);

So how do we create a functional component?

Using the stateful component made using the class component from before

Lets start by importing React and the useState hook at the top of your file.
```
+ import React, {useState} from 'react'
+    
```
Then we write a functional component like we did in the earlier stateless component and return a simple button component
```
import React, {useState} from 'react'
+
+ function Button(){
+     return <button></button>
+ }
```

Then we created the state variable. Using the below method

import React, {useState} from 'react'

 function Button(){
+
+    const [counter, useCounter] = useState(0);
+
    return <button></button>
}

We then attach the counter state as the label for the button

import React, {useState} from 'react'

 function Button(){

    const [counter, useCounter] = useState(0);

-   return <button></button>
+   return <button> {counter} </button>
 }

And finally we created and attached the increment method and used the setCounter function to update the state

 function Button(){
    const [counter, setCounter] = useState(0);

+   function increment(){
+       setCounter(counter + 1);
+   }
+
-   return <button> {counter} </button>
+   return <button onclick={increment}> {counter} </button>
 }

That's It !!🔥🔥🔥

So what have we done ??

We've removed the use of the this keyword
We've removed a bunch of boiler plate for binding functions and state.
We've essentially made our code more clean and concise.

Now what?

Well for now, you can read about the useState hook from Reacts Documentation

You can go read my article about the useEffect Hook. (To be made)

Working with Single-SPA

Ryan Kuruppu — Sun, 06 Dec 2020 16:50:37 +0000

UPDATE: This article was written with single-spa-react v2.14.0

Micro-frontends are gradually gaining popularity as a way to separate frontend applications in to small performant and easy to maintain parts doing this can lead to a variety of issues in terms of maintenance but libraries like Single-SPA and Piral make that easier for us.

This tutorial will cover the steps on how to set up the single-spa.js library and get your micro-frontend setup working.

If it helps you. Leave a like so I can keep pushing stuff like this for you guys

Before you jump in

Before we start working with this I'm going to let you know that as of Webpack 5, a new plugin has been released for webpack to enable "Module Federation" which is Webpack's way of achieving Micro-Frontend Architectures it is usually used as more of a performance enhancer but can be used to achieve the same thing as this.

To understand the difference between these and what they can do check this article snippet by the single-spa team

This article simply covers Single-SPA as (what I feel) an easier alternative to Webpack 5's Module Federation.

So let's get started.

What is Single-SPA?

The single SPA team refers to it as a

A javascript router for front-end microservices.

To elaborate on this, Single SPA is a javascript library which allows you to connect together multiple isolated frontend services to look and behave as a single monolith application.

Read Microservices vs Monolith Application to learn more the differences.

Why use it?

Multiple Frameworks. One single entry point.
- single-spa lets you mix and match supported frameworks or libraries and make them act and appear seamless for example you can use React and Angular to make two sections of the same app and it will look like it was built with just one of the two frameworks.
Performant
- While this more or less depends on the applications themselves. By using single-spa to join together separate applicaitons. You can reduce the bundle size of any single application and still connect them as you require without any performance loss between apps.
Extremely easy to setup.
- Most of the setup is done in the root application and beyond that, the create-single-spa CLI does most of the work.
Lazy Loading enabled by default.

So how does it work?

I personally think this video gives a great introduction to how Single-SPA works in a really basic way.

Hopefully you got an idea. If not, read this article to understand it a bit better

Okay, lets start writing

I'll be using Visual Studio Code as my editor of choice and React as the framework of choice for each micro-frontend application to keep things simple. But you can do the same thing to mix and match with other frameworks as well.

Single-SPA has two main parts which need to be considered,

The Root Configuration
- This will contain the HTML page needed for rendering the javascript framework components and the functions responsible for handling the application routing.
The Application's Themselves
- These are the application written in frameworks and libraries such as React, Vue, Svelte or even Angular

We'll start by setting up the Root Configuration Application using
create-single-spa CLI tool provided by Single-SPA

Install create-single-spa tool by installing it through npm or yarn



npm install -g create-single-spa

Or if you're using yarn



yarn global add create-single-spa

Then follow these steps to do the `create-single-spa` setup.

Step 1 : Create the root configuration by using the following command



npx create-single-spa

After running that, you should see this

Just leave it blank & click enter to use the Current Directory.

Then Choose single-spa root config

Choose the package manager of your choice. I'm going to pick yarn
Choose whether to create the project as a Typescript or Javascript project. I'll be using Javascript.
Decide whether you'll be using Single-SPA's template engine. In this tutorial we won't be using it for the sake of simplicity.
Finally, provide an organization name

The organization name should be the same across all the applications. This is because single-spa allows module resolution in the browser, it requires the organization name to be the same in order for it to work.

I will use my name (ryank) as the organization for now (This will usually be the name of your application).

At the this point your config should look like this.

Just click enter and single-spa should create the required files for your root application.

Your Folder structure will end up looking like this.

Now to see if everything works, just run either yarn start or npm run start.

If you see this page on localhost:9000, you have successfully setup the root configuration application for single-spa.

A bit of a run through

Inside the src folder, you will notice 2 files.

index.ejs
- This is the file which will be used as our index.html file after compilation. It will hold important information regarding our micro-frontend applications such as import-maps which our root-config.js file will use to navigate apps as well as the different common modules that each of our applications will use.
ryank-root-config.js
- This is our root configuration file where we will register our micro-frontends to single-spa.

These two files will control a lot in a very little amount of work.

So how do I register my app ?

Well in order to do that. We first need to need to create an application so that we can register it to our root component.

Step 1

Replicate the previous steps but instead of choosing
single-spa root-config
We choose
single-spa application/parcel

Like below.

Step 2

Choose the framework of your choice. In our case, we'll use React.

Step 3

Pick the package manager. We'll stick with yarn.

Step 4

Choose whether to use Typescript or not. We'll use plain Javascript

Step 5

Add the same organization name as you did with your root configuration.

Step 6

Here you need to add the name of your project. So in my case the project name will simply be app1

Your configuration should look similar to this

After clicking enter again. Single-SPA should create the necessary files and your folder structure should look like this.

If you see the above structure, check if you app is working by starting your app like below.



yarn start --port 8500

And visit http://single-spa-playground.org/playground/instant-test?name=@ryank/app1&url=8500
where "app1" in the url is whatever you named your project and 8500 is the port you used.

If you see this, you're on the right path

Now we connect them.

To connect your application to single-spa's config you need to do a couple of things. Before that lets introduce some new terms.

Shared Dependencies
- These are packages/libraries that are used across your micro-frontends. For example, if you were making a bunch of react micro-frontends, you would have to use react and react-dom across all of them. But remember that this is conditionally optional based on the requirements of your app.
Import Maps
- Import Maps are a browser specification for aliasing "import specifiers" to a URL. An import specifier is the string indicating which module to load. This will act as sort of an index for single-spa to follow when looking for apps to run.
SystemJS
- Please read single-spa's description of SystemJS
Public Path
- The Public Path is the public location of your application. This could be your local host or even a hosted URL from google cloud, AWS or Azure. We use the setPublicPathfunction inside set-public-path.jsto set this.

Alright now that that's done, let's connect our react app to our root app.

Remember, we are working on the context that all our microfrontends are built in react.

Step 1 : Configuring the Root App

Navigate to your root application and open up the index.ejs file.

Then copy these CDN's providing us with react and react-dom



"react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"

Locate this code snippet



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

And add the CDN's you copied after the single-spa CDN seperated by commas like this



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

This is done so that react and react-dom will be used across any of the new micro-frontends that we add.

Step 2 : Registering the New App

To register the app, you need to first

Navigate to your microfrontend app (app1 in our case)
Navigate to src/set-public-path.js
Copy the text inside the setPublicPath() function.

The text inside is a combination of your organization name and project name in the following format



@organization/project

After copying the text. Head back to your root config file and open the ryank-root-config.js file (ryank will be whatever your organization name is)

You should see a file like this.

The registerApplication() function is what will help us register our app to single-spa. It takes 3 arguments
1. name : This is your project identifier which has a format of @organization/project
2. app: This is a SystemJS import call that make a call to your app in order to bring it into the root application
3. activeWhen: This is either an array of strings which denote the path or a function that returns a string. This tell single-spa when your application should be active and when it shouldn't show.

To register app1 to single spa,

Uncomment the commented code and replace it so that it looks like the following.



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: "@ryank/navbar",
-//   app: () => System.import("@ryank/navbar"),
-//   activeWhen: ["/"]
-// });

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

start({
  urlRerouteOnly: true,
});

This will tell single-spa to render app1 when we navigate to http://localhost:9000/app1

After this we need to one more thing and that is adding your application to the import map.

To do this. You need to find this section of code in your index.ejs file



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

and then add your application url to it



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

The reason we need to add this to two places (index.ejs and root-config.js) is because single-spa runs the registerApplication function and then calls SystemJS which in turn refers to the import map located in your index.ejs file to find the relevant location of your micro-frontends.

If you followed these steps correctly your app should show up when you navigate to http://localhost:9000/app1 and you should see something like this :

The are surrounded in red is your app.

But if you notice both the Home Page (at localhost:9000) and your app (at localhost:9000/app1) are rendered in the same page.

This is single-spa's normal behavior so there's nothing to worry but we can change it by making a small change to the registerApplication function holding the home page.

To do this, navigate to your root-config.js file and change your file like the following



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(
+   "@single-spa/welcome",
+   () =>
+     System.import("https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"
+    ),
+    (location) => location.pathname.endsWith('/'),
+);

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

start({
  urlRerouteOnly: true,
});

If you navigate to http://localhost:9000/app1 you'll see that it will only say @ryank/app1 is mounted. And your app routes are now properly separated.

Just in case you don't see the apps. Make sure that both apps (app1 and root) are running before you navigate to the page

Congrats !! You've setup Single-SPA and run it with your own app. Best way to get used to it now is to carry on your own side project and try implementing it again.

Hopefully this article helped you out in setting up your single-spa project.

References

single-spa.js

Forem: Ryan Kuruppu

Arc you glad you met me ?

A few things to mention

1. Theming 🎨

2. Workspaces 🗂️

3 The command/action bar

4. Boosts

1.The in-built notes app

2.Split Views

3.Easels and Mood-Boards

React Hooks (useEffect)

🔖 Table of Contents

❗ Just for your Information

What is the useEffect hook?

So how is this gonna work?

The Task

Let's start writing.

Now lets start changing things up

Next lets introduce the useEffect hook.

The Structure

The callback function (A function which is passed as an argument to another function) is the first argument of the useEffect hook.

The Dependency Array 😵

Okay so how do I update the UI using useEffect?

Tips

Hope you enjoyed !😊

Let me know what you think in the comments below !

Further Reading

React Hooks (from Class to Functional)

🔖 Table of Contents

Pre-Requisites?

What are Hooks ?

What hooks are we going to look at

Functional Components

As you can probably see

Hooks to the rescue 😌

useState Hook

That's It !!🔥🔥🔥

Now what?

Working with Single-SPA

Before you jump in

What is Single-SPA?

Why use it?

So how does it work?

Okay, lets start writing

Then follow these steps to do the create-single-spa setup.

A bit of a run through

So how do I register my app ?

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Now we connect them.

Step 1 : Configuring the Root App

Step 2 : Registering the New App

References

Then follow these steps to do the `create-single-spa` setup.