Rocket and web components

Christian Letter — Tue, 11 Oct 2022 20:22:01 +0000

Rocket is a tool used for creating web pages and it is fabulous for generating static content starting from markdown files. One of the cool thing about Rocket is the fact that web components and javascript can be used inside the markdown files.

Creating a project with Rocket is quite straightforward, you can take a look at the documentation or if you like to learn by looking at examples, you can find good ones in the Rocket’s GitHub repository .

This guide is created for getting you started with Rocket and FicusJS. FicusJS is a set of lightweight functions for developing applications using web components.

Using the Create Ficus App CLI you can quickly scaffold a project that contains a basic structure for working with Rocket and FicusJS.

The project will contain:

Rocket development set-up
FicusJS web components
Unit testing with Ava and JSDom.

Getting Started

Create Ficus App lets you focus on code, not build tools. It also gives you an idea of how you should structure your project, which can be useful if this is the first time that you are using Rocket or FicusJS.

To create a new project called “my-app”, run this command:

npx create-ficus-app my-app

Using the arrow keys, select “rocket-app” and then press enter. Once the my-app folder is created, you can install the dependencies and start the project with the following commands:

cd  my-app

# install the dependencies using npm or yarn
npm install
yarn

# start the project
npm run dev

Starter Projects

If you ran the previous commands you probably noticed that Create Ficus App offers a selection of starter projects:

Basic app - a simple, single HTML page with inline scripts
11ty app - a Jamstack site based on 11ty - you can take a look at our previous post
Vite app - a single HTML page with Vite configuration
Snowpack app - a single HTML page with Snowpack configuration
Rocket app - a Jamstack site based on Rocket.

More projects are in development and will come soon!

Summary

Having a simple tool like Create Ficus App can save a lot of time when creating new projects. It gives you a headstart and allows you to incrementally add new tools and features as your project grows.
If you have any feedback on the tool, or want to suggest new integrations between FicusJS and existing tools and framework, please visit the Github repo.

DEV Community: Christian Letter

Rocket and web components

Getting Started

Starter Projects

Summary