Skip to content

Latest commit

 

History

History
170 lines (125 loc) · 6.4 KB

README.md

File metadata and controls

170 lines (125 loc) · 6.4 KB
Raw

generator-nikita Build Status

Latest Release: GitHub version

grunt webpack babel react sass postcss foundation jest eslint stylelint browsersync

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.

Contributing

We welcome contributions to generator nikita. See CONTRIBUTING.md for a small guide.

License

generator-nikita is licensed under CC0: Public Domain Dedication, please see NIKITA-LICENSE.md for further information.