Aik

Frontend Playground

Quick Start

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

aik index.js -o

Objectives

This project aims to help to prototype fast and not supposed to be a part of any production-ready system. If you want solutions which are better for production usage you can take a look at the alternatives list down below.

Aiks main goal is to be open for any JavaScript framework or library, even though it has extra features for React.

Table of Content

• Quick Start
• Objectives
• Usage
• Examples
• Features
  • Run web server with JavaScript file
  • Automatically install npm modules
  • Relative Module Pathes
  • Custom templates
  • Hot reload
  • Latest and greatest technologies for frontend development
  • Linting
  • Production ready build
  • Expose web server to the real world
  • Great Messages
• Alternatives
• Contributors
• Contributing
• License

Usage

Usage
  $ aik filename.js

Options
  -b  --build       Build production version for given entry point. [Default output: dist]
  -u, --base        Base path from witch urls in build begins
  -p, --port        Web server port. [Default: 8080]
  -h, --host        Web server host. [Default: localhost]
  -r, --react       Enables react hot loader.
  -n, --ngrok       Exposes server to real world by ngrok.
  -o, --open        Opens web server url in default browser.
  -c, --cssmodules  Enables css modules.
  -v, --version     Shows version.
  --help            Shows help.

Examples
  $ aik filename.js --port 3000 -n -c -r
  Runs aik web server on 3000 port with ngrok, css modules support and react hot loader

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

Examples

• Repository with example usage of Aik — aik-examples.
• English Cards

Features

Run web server with JavaScript file

Start playing around with new ideas is as simple as running a single command in your terminal:

aik index.js

Moreover:

• Suggest to create a file if it's not exist.
• Change server port automatically if default is in use.

Automatically install npm modules

Aik takes care of installing npm modules for you automatically using "npm install webpack plugin". Just add require or import statement in the JavaScript file and you are ready to go.

import react from 'react';
import ReactDOM from 'react-dom';

Relative Module Pathes

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 like more.

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.

Hot reload

Aik sets up hot reloading for CSS and with an extra option '-r' for React components using @gaeron's react-hot-loader.

aik index.js -r # option for enabling react hot loading

Important

!!!! Since version 0.13 hot reload for react works only with react 15.4+ !!!!**

With older version you will get an error:

Error: Cannot resolve module 'react-dom/lib/ReactMount'

• Releated commit: 203ad3a
• Issue in react-hot-loader: gaearon/react-hot-loader#417
• Issue/Discussion about react-hot-loader + aik: d4rkr00t/aik#132

Latest and greatest technologies for frontend development

There are (an opinionated) set of technologies that will help you prototype faster. Aik uses preset-latest 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.

• Modern javascript with Babel using Latest and React presets
• PostCSS with Autoprefixer and PreCSS
• [Optional] — css-modules

Linting

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

Production ready build

aik index.js --build

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

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

Build Successfully Finished

More examples here.

Alternatives

• create-react-app
• enclave
• nwb
• motion
• rackt-cli
• budō
• rwb
• quik
• sagui
• roc
• react-app
• dev-toolkit
• mozilla-neo
• tarec

Author

Stanislav Sysoev d4rkr00t@gmail.com https://github.com/d4rkr00t/aik

Contributors

• Amandeep

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