Rocket and web components

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.

Creat…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Christian Letter

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.


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Christian Letter


Print Share Comment Cite Upload Translate Updates
APA

Christian Letter | Sciencx (2022-10-11T20:22:01+00:00) Rocket and web components. Retrieved from https://www.scien.cx/2022/10/11/rocket-and-web-components/

MLA
" » Rocket and web components." Christian Letter | Sciencx - Tuesday October 11, 2022, https://www.scien.cx/2022/10/11/rocket-and-web-components/
HARVARD
Christian Letter | Sciencx Tuesday October 11, 2022 » Rocket and web components., viewed ,<https://www.scien.cx/2022/10/11/rocket-and-web-components/>
VANCOUVER
Christian Letter | Sciencx - » Rocket and web components. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/10/11/rocket-and-web-components/
CHICAGO
" » Rocket and web components." Christian Letter | Sciencx - Accessed . https://www.scien.cx/2022/10/11/rocket-and-web-components/
IEEE
" » Rocket and web components." Christian Letter | Sciencx [Online]. Available: https://www.scien.cx/2022/10/11/rocket-and-web-components/. [Accessed: ]
rf:citation
» Rocket and web components | Christian Letter | Sciencx | https://www.scien.cx/2022/10/11/rocket-and-web-components/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.