Setup OPTION 2 - Using CDN

Using CDN For Lone Component and/or Microfrontend

In the CND mode, instead of the whole folder structure, only the app folder and route.map.js file are needed, also, we need to set the path where they'll be placeed by using the STILL_HOME variable, follow the folder structure example as well as coding sample right after:

1. Folder Structure

First thing first, Still.js CDN based project are also named Lone component, and it's recommender for them to be create using still-cli in addition to add to CDN in the page file itself (e.g. .html), as both the app/ folder and the route.map.js file are needed even in this case, but the framework will be served from the CDN itself, hence, project structure can be as follow:

Folder structure in CDN mode

my-project-name
|
|_ microfronteds
|  |_ still
|  |  |_ app
|  |  |  |_ components
|  |  |_ config
|  |  |  |_ route.map.js
|  |_ another-mf-provider
|_ index.html

a. Creating Lone/CDN based project:

Creating the project inside the microfrontend/sill/ folder:

npx still lone

Project folder substructure considerations

In the above example structure, we have a folder name microfronted, where we have the still sub-folder, and, we also have component folder inside the app root, nevertheless all 3 (microfronted, still and component) can be named as per the dev will.

2. Basic code sample

index.htmlCounterComponent.jsroute.map.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <script> STILL_HOME = 'microfronteds/still/' </script>
        <link href="https://cdn.jsdelivr.net/npm/@stilljs/core@latest/@still/ui/css/still.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/@stilljs/core@latest/@still/lone.js"type="module"></script>
    </head>
    <body>
        <st-element component="CounterComponent"></st-element>
    </body>
</html>

/** 
 * This file will be place inside the components folder
 * according to the above folder structure 
 * */
export class CounterComponent extends ViewComponent {

    isPublic = true;
    count = 0;

    template = `
    <div>
        <p>My counter state is @count</p>
        <button (click)="increment()">Increment (@count)</button>
    </div>
    `;

    increment() {
        this.count = this.count.value + 1;
    }
}

/** 
 * This file will be placed inside config/ folder which is in the 
 * same level as app/ folder, and both are inside the still folder
 * */
export const stillRoutesMap = {
    viewRoutes: {
        regular: {
            CounterComponent: { path: "app/components/" }
        },
        lazyInitial: {}
    }
}

We can add our components in our HTML/App (React, Angular, etc.) by using<st-element> tag instead of depending on the Still.js Application container to render the components, as it (Application container) is totally inexistent in this case.

Component creation

Although we don't have Still project structure in CDN mode, it's always recommended to use the still-cli to generate components, as this is the way the routes will be automatically added/managed in addition to the component generation.

Routing and route.map.js file

Despite Still App container is not available in the CND mode, navigation feature is still available, plus, it's needed for the framework to know how to locate the components, hence the route.map.js file.

3. Running the project in CDN mode

The proper way of running the project in the CDN mode is by having it from a web server, we'll use live-server in this example, for that let's first install it:

npm i -g live-server

Running the project from inside the project root folder ( my-project-name )

npx live-server

Run result:

CDN Files

JavaScript:

https://cdn.jsdelivr.net/npm/@stilljs/core@latest/@still/lone.js

CSS:

https://cdn.jsdelivr.net/npm/@stilljs/core@latest/@still/ui/css/still.css