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

aik

v0.18.0

Published

Frontend Playground

Downloads

24

Readme

This project aims to help to prototype faster and not supposed to be a part of any production-ready system. If you want solutions that are better for production use case you can take a look at the alternatives section down below.

Quick Start

npm i -g aik # install using npm cli
yarn global add aik # or install using yarn

aik index.js -o

# or using npm's npx

npx aik index.js

aik quick start

Table of Content

Usage

Usage
  $ aik filename.js

Options
  -b  --build       Build production version for given entry point. [Default output: dist]
  -u, --base        Base path with which URLs in build begins
  -p, --port        Web server port. [Default: 8080]
  -h, --host        Web server host. [Default: localhost]
  -n, --ngrok       Exposes server to the real world by ngrok.
  -o, --open        Opens web server URL in the default browser.
  -v, --version     Shows version.
  --help            Shows help.

Examples
  $ aik filename.js --port 3000 -n
  Runs aik web server on 3000 port with ngrok and react hot loader

  $ aik filename.js --build
  Builds filename.js for production use and saves the output to dist folder.

Examples

Features

Run web server with a JavaScript file

To start experimenting with new ideas is as simple as running a single command in your terminal:

aik index.js

Moreover, Aik:

  • Creates an entry point if it doesn't exist.
  • Chooses server port automatically if default one is in use.
  • Shows an error overlay, so you don't have to look at your terminal at all.

NPM Modules

For simplifying work with npm modules Aik takes care of:

Automatic installation of npm modules

Just add a require or an import statement in a JavaScript file and you are ready to go.

import react from "react";
import ReactDOM from "react-dom";

Pre-installing NPM Modules

If there is a package.json file, Aik will automatically pre-install npm modules defined in it, before trying to compile an entry point.

Custom templates

By default, Aik uses built-in into the "html-webpack-plugin" template, but it's easy to create your own. Just add an HTML file with the same name as the JavaScript file.

aik-test/
├── index.js
└── index.html

Important: Do not add script tag with src to the JavaScript file (in the example above to index.js) Aik will do it automatically.

Frameworks Support

Framework Autodetection

Aik parses an entry point in order to figure out framework that is being used in an application. It's done by analyzing imports e.g. import React from 'react'; will trigger react support. Also it's possible to manually specify framework if an entry point doesn't provide any clues by just adding a comment on top of the file:

// aik-mode: react

React

In order to enable hot loading and hot module replacement – an entry point of an application should export default a react component:

import React from "react";

export default function App() {
  return <div>My React App.</div>;
}

This will wrap react component in an RHL compatible wrapper enabling hot reloading for react components and also mounts component to an element with id = app.

Also, you can manually wrap your component in react-hot-loader wrapper as described in RHL's readme.

Latest and greatest technologies for frontend development

There are (an opinionated) set of technologies that will help you prototype faster. Aik uses preset-env for babel which contains all yearly presets. And also you don't have to worry about all these messy prefixes in CSS because there is an autoprefixer which will do it for you. Moreover, there is a little bit of syntactic sugar over CSS provided by PostCSS and PreCSS.

Cutom .babelrc files

If there is a .babelrc file in a project Aik will use it automatically. That allows for better customization of a build as well as adds an ability to experiment with latest, experimental, features that are not yet enabled in Aik by default.

Linting

Aik comes with set up linters. Nothing annoying about code style, only rules which help you find potential errors.

Production ready build

aik index.js --build

Build command produces optimized for production use bundle. This makes it easy to publish prototype to GitHub pages, Surge, Now or wherever you want. Important that assets urls are relative to the root:

<script type="text/javascript" src="/index.c699c867.js"></script></body>

If you want to host a build in a sub directory (e.g. https://my-web-site.com/sub-dir/) you should run Aik with the '--base' flag:

aik index.js --build --base "/my-sub-folder"

Now assets urls are relative to a specified base path:

<script type="text/javascript" src="/my-sub-folder/index.c699c867.js"></script></body>

Expose web server to the real world

Optionally, by providing '-n' flag you can expose web server to the real world using "Ngrok".

aik index.js -n # option for enabling ngrok

Great Messages

Highly inspired by create-react-app and some other places.

Dev Server Error

aik dev server error

Build Successfully Finished

aik build success

More examples here.

Other resources

Alternatives

Author

Stanislav Sysoev [email protected] https://sysoev.org

Contributors

Contributing

Contributions are highly welcome! This repo is commitizen friendly — please read about it here.

I'll appreciate any grammatical or spelling corrections as I'm not a native speaker.

License

  • MIT : http://opensource.org/licenses/MIT