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

@jsnote-pdoreau/local-client

v1.0.6

Published

This is a Code Preview app built with React, Redux, Node.js, esbuild, TypeScript, and managed using Lerna.

Downloads

4

Readme

Code Preview App

This is a Code Preview app built with React, Redux, Node.js, esbuild, TypeScript, and managed using Lerna.

Table of Contents

Installation

To install the app and its dependencies, run the following commands:

npm install npm run bootstrap

This will install the dependencies for the main project as well as for the three packages: local-client, local-api, and cli.

Usage

To start the Code Preview app, run the following command from the root directory:

npm start

This will start the local-client and local-api packages, which are responsible for serving the front-end and back-end of the app, respectively. The app will be available at http://localhost:3000.

To use the cli package, run the following command from the root directory:

npm run cli

This will start the CLI tool for the app, which allows you to perform various operations such as saving and loading code snippets.

if node < 16 NODE_OPTIONS=--openssl-legacy-provider

Features

The Code Preview app allows you to enter HTML, CSS, and JavaScript code and preview the result in real-time. Some of the key features of the app include:

  • Real-time code preview
  • Syntax highlighting for HTML, CSS, and JavaScript code
  • Automatic code compilation using esbuild
  • Support for TypeScript
  • Ability to save and load code snippets
  • Built with React and Redux for a fast and responsive user interface
  • Runs on Node.js for easy deployment and scalability
  • Managed using Lerna for easy package management and versioning

Project Structure

The Code Preview app is divided into three packages, each of which has its own package.json file and node_modules directory:

  • local-client: This package contains the front-end code for the app, built with React and Redux.
  • local-api: This package contains the back-end code for the app, built with Node.js and Express.
  • cli: This package contains a CLI tool for the app, built with TypeScript and Node.js.

The main project also has its own package.json file, which manages the dependencies and scripts for the entire app.

Contributing

Contributions to the Code Preview app are welcome! To contribute, fork the repository and create a new branch for your feature or bug fix. Then submit a pull request and we'll review your changes.