npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wcarl-aet-oss

v2024.3.5

Published

wcarl aet oss

Downloads

6

Readme

Webstudio CLI

The Webstudio CLI helps you to link, sync and build projects from Webstudio Cloud. This README will guide you through the process of setting up a Webstudio project on your local machine and continually sync it with the cloud.

Prerequisites: Installing Node.js

You need Node.js to use the Webstudio CLI. If Node.js is already installed in your system, you can skip ahead to the section on installing the Webstudio CLI.

To install Node.js using NVM, first install NVM by running:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

Once NVM is installed, you can install Node.js version 18 by running:

nvm install 18

Verify your Node.js installation by checking its version:

node --version

Installing the Webstudio CLI

To get started with the Webstudio CLI:

  1. Download and install the CLI using the following command:

    npm install -g webstudio
  2. Confirm the installation by checking the CLI version:

    webstudio --version
  3. To keep your CLI updated, use the same command used for installation whenever a new release is available.

Initiating a Webstudio Project

Now, you can run a Webstudio project on your local machine using this command:

webstudio

This will initiate the flow to connect your Webstudio Cloud project and build it in your local computer. The default flow will guide you through the steps. You can also perform all the operations individually using independent commands.

Commands

Here is the list of independent commands:

  • version
  • help
  • link
  • sync
  • build

link

The link command syncs your local Webstudio project with the project from the cloud. This means that any changes made in the cloud can be synced to the local project, once they are published.

You can link a project from Webstudio Cloud with the following command:

webstudio link

This command will prompt you to paste a link which you can create using the Share option in your project.

Make sure to provide Build access when generating the link in Webstudio Cloud.

sync

Once the project is linked, use the sync command to sync it with the cloud:

webstudio sync

Make sure to publish the project in Webstudio Cloud before running the sync command in your local Webstudio project.

build

Now, you can build your project with the build command:

webstudio build

During this phase, the CLI establishes the necessary routes and pages, scaffolding the entire application using the default Remix template. Additionally, all assets, such as images and fonts are downloaded to the assets folder inside the public directory.

Once the project is scaffolded, you can run npm install and then npm run dev to run your app in development mode.

If you want to build a production version of the app, you can run npm run build.

Deployment

Vercel

Once you've built the project locally, you can use the Vercel CLI to deploy your project directly to Vercel:

vercel deploy

Follow the instructions here to install the vercel CLI. We plan to add more deployment targets in future.

Netlify

If you want to deploy to netlify, you can use Netlify CLI to deploy your project directly to Netlify:

netlify deploy

You can configure the project to support netlify serverless/edge-functions respectively, as deployment target at the time of initially setting up your project. Please check the initiating-a-webstudio-project section.

You can manually change it using the build command. For serverless functions:

webstudio build --template netlify-functions

and for edge functions:

webstudio build --template netlify-edge-functions

Important Notes

If you use vercel build before vercel deploy, make sure to clean your app folder in the project afterward.

Vercel injects a few files to support and deploy Remix using their CLI, but these files are not necessary for your project when you use it locally.