Contents
Since the launch of Stacks Mainnet, we’ve been making steady improvements to Stacks.js, a collection of JavaScript libraries for Stacks that make your life easier. The idea behind Stacks.js is simple: rather than make every developer build out common functions for their application, why not have a dedicated code library that can handle common functionalities that every developer needs?
That’s exactly what we built with Stacks.js. Need to integrate your app with the Hiro wallet? Authenticate your users? Broadcast transactions to the Stacks blockchain? Stacks.js can handle all of that for you. With a few simple lines of installation code in the Clarinet CLI, you now have all of this battle-tested code ready to go to handle basic functions for your Stacks app.
But we noticed there was still something to generalize, something every developer was doing at the start of a new web app project for the Stacks ecosystem: adding Stacks.js to a JavaScript project. So we decided to take things one step further and make this first step easier as well.
What if you could simply start from a fresh project, which already includes the minimal necessary code to interact with Stacks wallets and smart contracts— all while sticking with your favorite JavaScript frameworks.
That’s why we made Stacks.js Starters.
What are Stacks.js Starters?
Stacks.js starters are a new collection of minimal examples in the Stacks.js world. They let you instantly spin up a project that can interact with live smart contracts on the Stacks blockchain.
Rather than starting a new project from zero and learning how to correctly add Stacks.js to it, OR starting from a heavy example, and having to figure out which parts you don’t want, you now have Stacks.js starters: a collection of minimal code needed to deploy a working Stacks.js web application.
With a few clicks, you can hack around in a new web app project directly in your browser. Or you can use the new command line interface tool that bootstraps the same project locally on your machine.
With Stacks.js, you can select from the most popular JavaScript frameworks, including:
- React (Vite)
- React (create-react-app)
- React (Next.js)
- Svelte (Vite)
- SvelteKit (Vite)
- Vue (Vite)
We chose these frameworks because they are some of the most popular frontend frameworks in use today, and we are constantly adding more starters to this list. Let us know on GitHub or on Twitter what we should add next.
Bootstrap your frontend in just a few clicks.
With Stacks.js Starters, you will have a boilerplate application with some core Stacks.js functionality already written into the application. The basic functions included out of the box are:
- Wallet authentication: Connect to a wallet and get a user’s address.
- Voting: Execute an example smart contract.
We soft-launched Stacks.js Starters last month, and just last week we launched a Stacks.js Starter microsite in Hiro documentation. Through this page, you can visually select your favorite front-end framework and start editing code from a web-IDE (CodeSandbox) without leaving your browser or installing any files on your machine.
To get started, follow the instructions on this page or use this single command via the npm CLI:
Then you can similarly select your favorite framework of those above and start building immediately. Check out a demo from Hiro’s Developer Advocate Max to see how to set up an application through Stacks.js Starters via the CLI:
Conclusion
At Hiro, we want to make the development experience on Stacks the best in all of Web3, and this latest release is a step in that direction. With Stacks.js Starters, it’s easier than ever to bootstrap an application into production, helping you get your app in front of users faster.
Stay tuned for a number of new improvements coming to Stacks.js in the coming months, including more reusable components. If you have any questions or things you’d like to see, open an issue on GitHub. Happy coding!
P.S. do you need help getting started with your Web3 development? Download our free guide to developing smart contracts.
