{"id":13480120,"url":"https://github.com/d4rkr00t/aik","last_synced_at":"2025-03-04T22:48:22.144Z","repository":{"id":57174844,"uuid":"52630660","full_name":"d4rkr00t/aik","owner":"d4rkr00t","description":"Frontend Playground","archived":false,"fork":false,"pushed_at":"2018-03-06T07:10:25.000Z","size":4016,"stargazers_count":43,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-30T00:33:59.780Z","etag":null,"topics":["aik","frontend-playground","javascript","playground","postcss","prototyping","react","repl","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/d4rkr00t.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-26T20:25:45.000Z","updated_at":"2021-07-03T22:43:27.000Z","dependencies_parsed_at":"2022-08-28T21:00:23.808Z","dependency_job_id":null,"html_url":"https://github.com/d4rkr00t/aik","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4rkr00t%2Faik","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4rkr00t%2Faik/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4rkr00t%2Faik/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d4rkr00t%2Faik/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d4rkr00t","download_url":"https://codeload.github.com/d4rkr00t/aik/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241422253,"owners_count":19960449,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aik","frontend-playground","javascript","playground","postcss","prototyping","react","repl","webpack"],"created_at":"2024-07-31T17:00:34.857Z","updated_at":"2025-03-04T22:48:22.118Z","avatar_url":"https://github.com/d4rkr00t.png","language":"JavaScript","funding_links":[],"categories":["Alternatives","JavaScript"],"sub_categories":[],"readme":"\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"/assets/aik.png\" alt=\"aik\" width=\"350\" align=\"center\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"/assets/hero-image.png\" alt=\"aik hero image\" align=\"center\"\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cp align=\"center\"\u003e\u003cbig\u003e\nFrontend Playground\n\u003c/big\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.org/package/aik\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/aik.svg\" alt=\"NPM Version\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"http://opensource.org/licenses/MIT\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/aik.svg\" alt=\"License\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://github.com/d4rkr00t/aik/issues\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/issues/d4rkr00t/aik.svg\" alt=\"Github Issues\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://travis-ci.org/d4rkr00t/aik\"\u003e\n    \u003cimg src=\"https://img.shields.io/travis/d4rkr00t/aik.svg\" alt=\"Travis Status\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"http://commitizen.github.io/cz-cli/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg\" alt=\"Commitizen Friendly\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\nThis project aims to help to prototype faster and not supposed to be a part of any production-ready system. If you want\nsolutions that are better for production use case you can take a look at the [alternatives](#alternatives) section down\nbelow.\n\n## Quick Start\n\n```sh\nnpm i -g aik # install using npm cli\nyarn global add aik # or install using yarn\n\naik index.js -o\n\n# or using npm's npx\n\nnpx aik index.js\n```\n\n![aik quick start](/assets/dev.png)\n\n## Table of Content\n\n* [Quick Start](#quick-start)\n* [Usage](#usage)\n* [Examples](#examples)\n* [Features](#features)\n  * [Run web server with JavaScript file](#run-web-server-with-javascript-file)\n  * [NPM Modules](#npm-modules)\n  * [Custom templates](#custom-templates)\n  * [Frameworks Support](#frameworks-support)\n    * [Framework Autodetection](#framework-autodetection)\n    * [React](#react)\n  * [Latest and greatest technologies for frontend development](#latest-and-greatest-technologies-for-frontend-development)\n  * [Linting](#linting)\n  * [Production ready build](#production-ready-build)\n  * [Expose web server to the real world](#expose-web-server-to-the-real-world)\n  * [Great Messages](#great-messages)\n* [Other resources](#other-resources)\n* [Alternatives](#alternatives)\n* [Contributors](#contributors)\n* [Contributing](#contributing)\n* [License](#license)\n\n## Usage\n\n```sh\nUsage\n  $ aik filename.js\n\nOptions\n  -b  --build       Build production version for given entry point. [Default output: dist]\n  -u, --base        Base path with which URLs in build begins\n  -p, --port        Web server port. [Default: 8080]\n  -h, --host        Web server host. [Default: localhost]\n  -n, --ngrok       Exposes server to the real world by ngrok.\n  -o, --open        Opens web server URL in the default browser.\n  -v, --version     Shows version.\n  --help            Shows help.\n\nExamples\n  $ aik filename.js --port 3000 -n\n  Runs aik web server on 3000 port with ngrok and react hot loader\n\n  $ aik filename.js --build\n  Builds filename.js for production use and saves the output to dist folder.\n```\n\n## Examples\n\n* Repository with example usage of Aik — [aik-examples](https://github.com/d4rkr00t/aik-examples).\n* [English Cards](https://github.com/d4rkr00t/english-cards)\n\n## Features\n\n### Run web server with a JavaScript file\n\nTo start experimenting with new ideas is as simple as running a single command in your terminal:\n\n```sh\naik index.js\n```\n\nMoreover, Aik:\n\n* Creates an entry point if it doesn't exist.\n* Chooses server port automatically if default one is in use.\n* Shows an error overlay, so you don't have to look at your terminal at all.\n\n### NPM Modules\n\nFor simplifying work with npm modules Aik takes care of:\n\n#### Automatic installation of npm modules\n\nJust add a require or an import statement in a JavaScript file and you are ready to go.\n\n```js\nimport react from \"react\";\nimport ReactDOM from \"react-dom\";\n```\n\n#### Pre-installing NPM Modules\n\nIf there is a `package.json` file, Aik will automatically pre-install npm modules defined in it, before trying to\ncompile an entry point.\n\n### Custom templates\n\nBy default, Aik uses built-in into the \"[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)\"\ntemplate, but it's easy to create your own. Just add an HTML file with the same name as the JavaScript file.\n\n```\naik-test/\n├── index.js\n└── index.html\n```\n\n**Important:** Do not add script tag with src to the JavaScript file (in the example above to index.js) Aik will do it\nautomatically.\n\n### Frameworks Support\n\n#### Framework Autodetection\n\nAik parses an entry point in order to figure out framework that is being used in an application.\nIt's done by analyzing imports e.g. `import React from 'react';` will trigger react support.\nAlso it's possible to manually specify framework if an entry point doesn't provide any clues\nby just adding a comment on top of the file:\n\n```js\n// aik-mode: react\n```\n\n#### React\n\nIn order to enable hot loading and hot module replacement – an entry point of an application should export default a react component:\n\n```js\nimport React from \"react\";\n\nexport default function App() {\n  return \u003cdiv\u003eMy React App.\u003c/div\u003e;\n}\n```\n\nThis will wrap react component in an RHL compatible wrapper enabling hot reloading for react components and also mounts\ncomponent to an element with id = `app`.\n\nAlso, you can manually wrap your component in react-hot-loader wrapper as described in\n[RHL's readme](https://github.com/gaearon/react-hot-loader/#migrating-from-create-react-app).\n\n### Latest and greatest technologies for frontend development\n\nThere are (an opinionated) set of technologies that will help you prototype faster. Aik uses\n[preset-env](http://babeljs.io/docs/plugins/preset-env/) for babel which contains all yearly presets. And also you don't\nhave to worry about all these messy prefixes in CSS because there is an autoprefixer which will do it for you. Moreover,\nthere is a little bit of syntactic sugar over CSS provided by PostCSS and PreCSS.\n\n* Modern javascript with [Babel](https://babeljs.io/) using [Env](http://babeljs.io/docs/plugins/preset-env/) and\n  [React](http://babeljs.io/docs/plugins/preset-react/) presets\n* [PostCSS](https://github.com/postcss/postcss) with [Autoprefixer](https://github.com/postcss/autoprefixer) and\n  [PreCSS](https://github.com/jonathantneal/precss)\n\n#### Cutom .babelrc files\n\nIf there is a .babelrc file in a project Aik will use it automatically.\nThat allows for better customization of a build as well as adds an ability to experiment with latest, experimental, features\nthat are not yet enabled in Aik by default.\n\n### Linting\n\nAik comes with set up linters. Nothing annoying about code style, only rules which help you find potential errors.\n\n* [ESLint](http://eslint.org/)\n* [ESLint React Plugin](https://github.com/yannickcr/eslint-plugin-react) for linting React specific things\n\n### Production ready build\n\n```sh\naik index.js --build\n```\n\nBuild command produces optimized for production use bundle. This makes it easy to publish prototype to GitHub pages, Surge, Now or wherever you\nwant. Important that assets urls are relative to the root:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"/index.c699c867.js\"\u003e\u003c/script\u003e\u003c/body\u003e\n```\n\nIf 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'\nflag:\n\n```sh\naik index.js --build --base \"/my-sub-folder\"\n```\n\nNow assets urls are relative to a specified base path:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"/my-sub-folder/index.c699c867.js\"\u003e\u003c/script\u003e\u003c/body\u003e\n```\n\n### Expose web server to the real world\n\nOptionally, by providing '-n' flag you can expose web server to the real world using\n\"[Ngrok](https://github.com/bubenshchykov/ngrok)\".\n\n```sh\naik index.js -n # option for enabling ngrok\n```\n\n### Great Messages\n\nHighly inspired by create-react-app and some other places.\n\n#### Dev Server Error\n\n![aik dev server error](/assets/syntax-error.png)\n\n#### Build Successfully Finished\n\n![aik build success](/assets/build-success.png)\n\nMore examples [here](/docs/messages.md).\n\n## Other resources\n\n* Video from SydJS Talk: [\"Aik - Painless Prototyping\"](https://www.youtube.com/watch?v=KnaX7MXJdao)\n* Slides for SydJS talk: [\"Aik – Painless Prototyping\"](http://sysoev.org/talks/aik/)\n\n## Alternatives\n\n* [create-react-app](https://github.com/facebookincubator/create-react-app)\n* [enclave](https://github.com/eanplatter/enclave)\n* [nwb](https://github.com/insin/nwb)\n* [motion](https://github.com/motion/motion)\n* [rackt-cli](https://github.com/mzabriskie/rackt-cli)\n* [budō](https://github.com/mattdesl/budo)\n* [rwb](https://github.com/petehunt/rwb)\n* [quik](https://github.com/satya164/quik)\n* [sagui](https://github.com/saguijs/sagui)\n* [roc](https://github.com/rocjs/roc)\n* [react-app](https://github.com/kriasoft/react-app)\n* [dev-toolkit](https://github.com/stoikerty/dev-toolkit)\n* [mozilla-neo](https://github.com/mozilla/neo)\n* [tarec](https://github.com/geowarin/tarec)\n\n## Author\n\nStanislav Sysoev d4rkr00t@gmail.com https://sysoev.org\n\n## Contributors\n\n* [Amandeep](https://github.com/a-s-o)\n\n## Contributing\n\nContributions are highly welcome! This repo is commitizen friendly — please read about it\n[here](http://commitizen.github.io/cz-cli/).\n\n**I'll appreciate any grammatical or spelling corrections as I'm not a native speaker.**\n\n## License\n\n* **MIT** : http://opensource.org/licenses/MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd4rkr00t%2Faik","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd4rkr00t%2Faik","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd4rkr00t%2Faik/lists"}