Frontend Playground
npm i -g aik # install using npm cli
yarn global add aik # or install using yarn
aik index.js -oThis 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.
Aik's main goal is to be open for any JavaScript framework or a library, even though it has extra features for React.
- Quick Start
- Objectives
- Usage
- Examples
- Features
- Other resources
- Alternatives
- Contributors
- Contributing
- License
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.- Repository with example usage of Aik — aik-examples.
- English Cards
Start playing around with new ideas is as simple as running a single command in your terminal:
aik index.jsMoreover, 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.
For simplifying work with npm modules Aik takes care of:
Just add a require or an import statement in a JavaScript file and you are ready to go (thanks to npm install webpack plugin).
import react from "react";
import ReactDOM from "react-dom";If a project contains package.json, Aik will automatically pre-install npm modules defined in it, before trying to
compile an entry point.
Let's assume such project structure:
├── index.js
└── components
├── comp1
└── comp1.js
└── comp2
└── comp2.js
And if you want to import comp2.js from comp1.js you can do it using both these ways:
// comp1.js
// Import relative to the index.js
import comp2 from "components/comp2/comp2";
// Or import relative to comp1.js
import comp2 from "../comp2/comp2";Choose the way you prefer the most.
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.
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: reactIn 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 Migration to 3.0 guide.
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.
Aik comes with set up linters. Nothing annoying about code style, only rules which help you find potential errors.
- ESLint
- ESLint React Plugin for linting React specific things
aik index.js --buildProduces minimized build for production usage. It's easy to publish prototype to GitHub pages, Surge, 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 build in 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 specified base path:
<script type="text/javascript" src="/my-sub-folder/index.c699c867.js"></script></body>Optionally, by providing '-n' flag you can expose web server to the real world using "Ngrok".
aik index.js -n # option for enabling ngrokHighly inspired by create-react-app and some other places.
More examples here.
- Video from SydJS Talk: "Aik - Painless Prototyping"
- Slides for SydJS talk: "Aik – Painless Prototyping"
- create-react-app
- enclave
- nwb
- motion
- rackt-cli
- budō
- rwb
- quik
- sagui
- roc
- react-app
- dev-toolkit
- mozilla-neo
- tarec
Stanislav Sysoev d4rkr00t@gmail.com https://github.com/d4rkr00t/aik
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.