snowpack-ui: A Web Interface for managing Snowpack projects
Tags: snowpack, cli, createsnowpackapp
Published: 2021-01-20 06:46:28

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](https://snowpack.dev) 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](https://emberjs.com) called [ember-cli-ui](https://github.com/rajasegar/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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m02q4nsqfbzcy6v6dfv0.png)

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".

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fhbm92c4kd53rgucogta.png)

## 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](https://github.com/rajasegar/snowpack-ui/issues) repository.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yf1ngmk5gpst49znudhc.png)

## 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8lqj43s3rxox83c91k8f.png)

## 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lybzsq1c1jwdw3stsz9f.png)

## 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vcap5t5szmo4ucs0or21.png)



## 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/59onkhqkm6sypa2juf1f.png)

## 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

{% youtube PtAnQ-6zBUU %}

## 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](https://github.com/rajasegar/snowpack-ui)