In this post, we are going to take a look at a new tool called snowpack-ui which is a Browser based interface to manage your Snowpack projects.
You can create new Snowpack projects using the create-snowpack-app, start the development server, build projects, install dependencies and so on, using this web application. And all of this can be done from the convenience of your browser instead of switching back and forth between the terminal and the browser.
I don't have to quote any research text to tell you the time wasted in context-switching between various tools during the development phase. So this tool brings a new perspective and productivity boost for web developers who are using Snowpack.
Inspiration
I am a great fan of the vue-cli-ui which allows you to manage all your Vue projects from a single place in the browser. Taking inspiration from that, I have created one for Ember.js called ember-cli-ui. Snowpack UI makes heavy use of the code from ember-cli-ui and reuse a lot of concepts and functionalities from both these projects.
Installation
You can install this tool from npm
npm i -g snowpack-ui
or you can run the tool directly with npx
npx snowpack-ui
New Project
Creating a new project with snowpack-ui is a breeze. You have the intuitive UI for selecting the app template and the package manager to use. It's way better than typing these long commands in the terminal. For example, if you want to create a React app with create-snowpack-app you should enter the following command:
create-snowpack-app my-app --template @snowpack/app-template-react --use-yarn
Once your project is created by making new folders, installing the dependencies you will get the following message which tells you to move to the project home. You can do that by clicking on the "Take me to Project page".
Project Home
Once you created a new project, in the project home page, you can see some details about the dependencies used in the project, the snowpack version and so on. I am planning to include more exhaustive information here, if you feel any other important information need to be added here, please let me know in the comments or feel free to open an issue in the Github repository.
Build Project
You can build your Snowpack projects by going to the build page. Once you click the Build Project button, the tool will run the snowpack build command and the terminal output is shown live in the page. Once the build is complete, you will get the list of assets that were built along with the statistics like file size, gzipped size and the download time it will take on various networks. This particular feature of download times was heavily inspired by the vue-cli.
This will give you a rough idea about how much time these assets will take to download in the browser.
Dev Server
This page will be the most used one during development, where you can start the dev server and view the live terminal output of the build process.
Install dependencies
You can also install additional npm packages to your projects without going to the command line, from within the snowpack-ui. All you need to do is to go to the Install page and type your npm package name, and optionally check the Development checkbox if you want to install it as a dev dependency.
Project Tasks
Oftentimes, you need to carry out a lot other tasks in your project apart from dev server and build. That's why we have a separate section in snowpack-ui to run your project's tasks. All the tasks from your package.json from the scripts section is populated here, you can choose any one and click the Run Task button to run that task.
Demo Video
I have put together a walkthrough video for snowpack-ui. You can watch the complete workflow from creating a project to building it for production, here
What's next for Snowpack UI?
- Save app templates as default
- Manage Snowpack config
- More extended dependency info ( things like outdated packages etc.,)
Source code
The code for this project is hosted in Github
Top comments (0)