StillJS Apploader Lib

Loads your Still.js App/Microfrontend to React, etc.

Microfrontend with Still.js Framework

This is Still.js package which provides the capabilities to integrate Still.js Application as a Microfrontend to other applications which are developed in other Framewoks or Libraries (e.g. React).

Join the discord channel

Overview

When embeding a Still.js application anto another application as a Mirofrontedn, two ways are provided as follow:

CDN Approache

This scenarios requires only the existence of the app/ folder for holding the app itself, and the config/route.map.js file for the routing purposes, components will be created as needed.

const stillApp = new StillAppLoader();
stillApp.local({ env: { STILL_HOME: 'public/path/to/still-app/' } }).load();

Local Approache

Embeds an app which the whole Still.js project structure os available as part of the whole project. components will be created as needed.

const stillApp = new StillAppLoader();
stillApp.local({ env: { STILL_HOME: 'public/path/to/still-app/' } }).load();

PS: Either approaches requires the STILL_HOME environment variable to be stated.

Usage example

Say you have a React project generate with Vite, install StillAppLoader which will be part of your projects dependencies, and you should be good to go considering the following aspects:

Your React Project structure

    react-project-root-folder/ //My project folder
    |___ node_modules/ // Among other it'll hold the StillAppLoader
    |     |__ ... // All installed modules
    |     |
    |___ public/ // Among other it'll hold the StillAppLoader
    |     |__ mymicrofrontend/ // Will hold the Still app
    |     |    |__ app/ // Will contain the app
    |     |    |__ config/ // Will containe config files (e.g. route.map.js, app-setup.js)
    |     |
    |___ src/ // React app files filder
    |     |__ App.css //Component generated automatically when creating project
    |     |__ App.tsx //Component generated automatically when creating project
    |     |__ vite-env.d.ts //Component generated automatically when creating project
    |     |__ ... // additional files concerning to React project generate with Vite

Loading the Still app in a React component

By creating a new instance os StillAppLoader, we can then specify the STILL_HOME environment variable, and assign it with the path on where it's located which have to be inside the public/ folder.

import { useEffect } from 'react';
import './App.css';
import { RegularReactComponent } from "./components/RegularReactComponent";
import { StillAppLoader } from '@stilljs/apploader';

function App() {

  useEffect(() => {

    // Creating App loader instance
     const stillApp = new StillAppLoader();
     stillApp.cdn({ env: { STILL_HOME: 'public/mymicrofrontend/' } }).load();

     // Unload the App when destroying the React component
     return () => stillApp.unload();

  },[]);


  return (
    <>
      <RegularReactComponent></RegularReactComponent>
      React validating local Still component embeding
    </>
  )
}

export default App

Embeding Still.js component inside a React App/component

To embed a Still.js componet in react we do it the same way it's done in regular Still.js App.

  return (
    <>
      <RegularReactComponent></RegularReactComponent>
      React validating local Still component embeding
      <st-element component="HomeComponent"></st-element>
    </>
  )

You're all set, Congrats!