@stilljs/cli v1.7.17
StillJS CLI
This is the CLI tool for StillJS Framework
The Still.js Framework
StillJS is a Web UI Framework which helps you to build your user interfaces which uses Vanilla JavaScript, yet the component approach is the main focus allowing you to modulrize your UI in the same fashion we do with React and Angular. visit the official documentation for deeper overview.
Join the discord channel
still-cli Commands options overview
Once installed globally, the command can be called by its aliaes which are st
or still
, will use still for the coming examples:
Brief Documentation
A complete documentation is not yet available, as the work is in progress, anyway there is quite of content and documentation available on the site, click here.
1. Instalation
The official documentation concerning environment set up and project creation can be found here; cli tools needs to be installed globally as follow bellow:
npm i @stilljs/cli -g
2. Creating a project
Create a folder for you project (e.g. project-name) and from inside such folder init the project as the bellow instruction
npx still init
After initiating the project the framework structure and files are download to the folder.
2.1 Project structure
project-name/ //My project folder
|___ @still/ // Still.js framework
|___ app/ // Folder which holdes to app files
| |__ HomeComponent.js //Component generated automatically when creating project
|__ config/ //Folder which holds application configuration files
| |__ app-setup.js //App configuration file/class
| |__ app-template.js //App template scheleton
| |__ route.map.json //Component routing and path file
|__ index.html //Application container
|__ jsconfig.js //Basic configuration for vscode
|__ package.json // Regular package JSON
3. Usage example
import { ViewComponent } from "../../@still/component/super/ViewComponent.js";
export class HomeComponent extends ViewComponent {
/**
* isPublic flag is needed for any component that is publicly accessible, therefore,
* when dealing with authentication and permission scenario any component requiring
* user permission the flag will be removed or turned to false
*/
isPublic = true;
template = `
<div>
<h2>Hello world!</h2>
<p>
I'm an easy component with a button
</p>
<button>I'm a button</button>
</div>
`;
}
3.1 Running the project
From the project root folder, use still-cli to run the app as follow:
npx still app serve
You're all set with Still.js project, Enjoy your coding! ☻
Alternative from CDN
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:
Project structure example:
project-name/ //My project root folder
|___ microfrontend/ // This is simply for isolating from my project files
| |__ app/ //Component will be placed in here following the folder structure as I will
| | |__ //MyCustomComponent.js -- This component will be created bellow (point b.)
| |__ config/ //still-cli will add the route automatically when creating a component
| | |__ route.map.js //still-cli will add the route automatically when creating a component
| |
// Bellow are the files of my project placed in the project root folder
|__ index.html
|__ my-project-folder/
|__ ... // Additional files from my project
a. Creating Lone/CDN based project:
Creating the project inside the microfrontend/
folder:
npx still lone
b. Creating the component from inside the microfrontend/
folder:
Using --lone
peram at the end is mandatory when creating a component within a CND based project.
npx still create component app/MyCustomComponent --lone
c. Including CDN files in my regular page file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>StillJS</title>
<!-- Bellow is the Still environment variable to inform where to look for components -->
<script> STILL_HOME = 'microfrontend/' </script>
<!-- Bellow both JavaScript and CSS CDN inclusion, JS type neeeds to module -->
<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>
<div>
<!-- Bellow component (MyCustomComponent) needs to be created as in step previous step (step c.) -->
<st-element component="MyCustomComponent"></st-element>
</div>
</body>
d. Running the project:
On the Lone/CDN based project the application won't be run using still-cli, but it needs to be serve by an HTTP server, for testing purpose live-server
can be used, and it needs to be run from the project root folder not from the still project sub-folder, follow the example:
npx live-server
When using CDN Still.js provides also with the capability of creating powerfull Microfrontend solutions in addition to regular component approach, follow the official documentation on how to set it up here.
You're all set, Congrats!
3 months ago
3 months ago
4 months ago
4 months ago
3 months ago
3 months ago
3 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago