Generator-nikita NPM

generator-nikita

Latest Release:

This is our generator to start a new web project from scratch. It will generate a completely customized version of our nikita kickstarter for your project. Feel free to re-run the generator to add or remove features.

Project-Setup

Grunt – JavaScript task runner
Webpack – module bundler
Babel – next generation JavaScript compiler
twigRender – static site generator
React or JSB - JS framework
SCSS with LibSass – CSS preprocessing
PostCSS – CSS postprocessing
Foundation – SCSS framework
Jest – JS testing framework
ESLint – linter for JS files
stylelint – linter for SCSS files
Browsersync – synchronised browser testing
nikita.html – HTML conventions and coding guidelines
nikita.css – (S)CSS conventions and coding guidelines
nikita.js – JS conventions and coding guidelines
and many more optional features:
- libraries swiper, choices, react-select, a11y-dialog, lodash and date-fns
- svg images as inlined css background images
- useful scss mixins
- webfonts
- separated JS build for modern browsers
- pre-commit hook for code linting
- docker setup
- basic gitlab-ci setup

Getting Started

Installation

To execute generator-nikita, just go to desired directory and run:

npx -p yo -p generator-nikita yo nikita

Then npx will download newest Yeoman cli and generator-nikita to it's cache dir and execute them.

Generator main questions

Your project name

These answer will set the corresponding value in the generated package.json.

Which configuration template do you want to use?
* Web-App setup
* Symfony setup
* Wordpress setup
* Spring Boot setup

Here you can choose a config preset for your kind of project. See Templates section below for further information.

Customize this template?

Answer Yes to customize the nikita default options. This will ask you several questions which features, mixins, extends and libraries to add.

Which root folder do you want to use?

Here you can just hit enter to keep the template default root folder or enter a custom folder. In this specified folder, the src and static folders gets created.

Templates

Web-App

This is the standard template for stand-alone web apps. The root folder is your project directory by default.

Symfony

The Symfony template sets the root folder to public/. In addition, the dev server can proxy your web-server and watch to twig template changes.

To use the nikita build files, just add something like following lines to your base.html.twig file:

<link rel="stylesheet" href="{{ asset('static/generated/styles.css') }}" />
<script src="{{ asset('static/generated/main.js') }}"></script>

Wordpress

The Wordpress template sets the source folder to web/.

To use the nikita build files (e.g. web/static/generated/main.js and web/static/generated/styles.css), just enqueue them in your wordpress theme like this:

wp_enqueue_script('main.js', '/web/static/generated/main.js', array(), '1.0', false);
wp_enqueue_style('styles.css', '/web/static/generated/styles.css', array(), '1.0', 'all');

Spring Boot

The Spring Boot template sets the source folder to src/main/resources/web/. In addition, the files Application.java and pom.xml are generated. Therefor you were ask for Java groupId, Java version and Spring Boot version.