Skip to content

Commit

Permalink
update blueprints doc
Browse files Browse the repository at this point in the history
  • Loading branch information
deepu105 committed Jun 24, 2018
1 parent 62b27ca commit 23a7914
Show file tree
Hide file tree
Showing 10 changed files with 223 additions and 18 deletions.
5 changes: 3 additions & 2 deletions _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
<a href="#opts">Options</a>
</li>
<li class="page-scroll">
<a href="#modules">Modules</a>
<a href="#modules">Modules &amp; Blueprints</a>
</li>
{% endif %}
{% if page.home != true %}
Expand Down Expand Up @@ -284,12 +284,13 @@
</div>
</li>
<li class="panel panel-default dropdown">
<a data-toggle="collapse" href="#dropdown-10"><span class="icon fa fa-fw fa-cubes"></span><span class="title">Modules</span></a>
<a data-toggle="collapse" href="#dropdown-10"><span class="icon fa fa-fw fa-cubes"></span><span class="title">Modules &amp; Blueprints</span></a>
<div id="dropdown-10" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body">
<ul class="nav navbar-nav">
<li {% if '/modules/marketplace/' == page.url %}class="active" {% endif %}><a href="{{ site.url }}/modules/marketplace/"><i class="fa fa-fw fa-shopping-cart"></i> Marketplace</a></li>
<li {% if '/modules/creating-a-module/' == page.url %}class="active" {% endif %}><a href="{{ site.url }}/modules/creating-a-module/"><i class="fa fa-fw fa-cube"></i> Creating a module</a></li>
<li {% if '/modules/creating-a-blueprint/' == page.url %}class="active" {% endif %}><a href="{{ site.url }}/modules/creating-a-blueprint/"><i class="fa fa-fw fa-cube"></i> Creating a blueprint</a></li>
</ul>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -676,7 +676,7 @@ <h2 class="heading">Who uses JHipster?</h2>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="heading">Modules</h2>
<h2 class="heading">Modules &amp; Blueprints</h2>
<hr class="star-light">
</div>
</div>
Expand All @@ -691,7 +691,7 @@ <h2 class="heading">Modules</h2>
</div>
</div>
<div class="text-center">
<p>Top trending modules</p>
<p>Top trending modules and blueprints</p>
<br>
</div>
<div class="row">
Expand Down
2 changes: 1 addition & 1 deletion js/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ $('.navbar-collapse ul li a').click(function () {
GHService.getGitHubConfig('jhipster', 'generator-jhipster').success(function (data) {
$scope.gitConfig = data;
});
$scope.gitContributors = '400+';
$scope.gitContributors = '420+';
/*
// Commented out as this isn't efficient now we have 400+ contributors
var page = 0;
Expand Down
2 changes: 1 addition & 1 deletion js/services.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
},
getAllModules: function (start, size) {
/* Get all Jhipster modules */
return $http.get('https://api.npms.io/v2/search?q=keywords%3Ajhipster-module&from=' + start + '&size=' + size).success(function (resp) {
return $http.get('https://api.npms.io/v2/search?q=keywords%3Ajhipster-module%2Cjhipster-blueprint&from=' + start + '&size=' + size).success(function (resp) {
return resp;
});
},
Expand Down
170 changes: 170 additions & 0 deletions modules/creating_a_blueprint.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
---
layout: default
title: Creating a blueprint
permalink: /modules/creating-a-blueprint/
redirect_from:
- /creating_a_blueprint.html
- /modules/creating_a_blueprint.html
sitemap:
priority: 0.7
lastmod: 2015-12-05T18:40:00-00:00
---

# <i class="fa fa-cube"></i> Creating a blueprint

A JHipster blueprint is a Yeoman generator that is [composed](http://yeoman.io/authoring/composability.html) from a specific JHipster sub-generator to extend the functionality of that sub-generator. The blueprint can override any defined getter of the sub generator and provide its own templates and functionality.

JHipster blueprints are listed on the [JHipster marketplace]({{ site.url }}/modules/marketplace/) with the `jhipster-blueprint` label.

This allows to create third-party blueprints that can override a specific part of JHipster, say for example only the client side templates.

## Using a blueprint

To use a blueprint, run the below command

```
jhipster --blueprint <blueprint name>
```

## Example

The [JHipster Kotlin](https://github.com/jhipster/jhipster-kotlin) blueprint replaces most of the server side Java code with equivalent Kotlin code.

It is our official blueprint that showcases how you can create your own blueprint.

The [JHipster Sample Blueprint](https://github.com/hipster-labs/generator-jhipster-sample-blueprint) shows how a client sub generator can be overriden.

Or, you can use the [JHipster blueprint generator](https://github.com/jhipster/generator-jhipster-blueprint) to help you to initialize your blueprint. Choose the sub-generators that you would like to override while answering the questions.

## Basic rules for a JHipster blueprint

A JHipster blueprint:

- is an NPM package, and is a Yeoman generator.
- follows an extension of the Yeoman rules listed at [http://yeoman.io/generators/](http://yeoman.io/generators/) and can be installed, used and updated using the `yo` command. Instead of being prefixed by `generator-`, it is prefixed by `generator-jhipster-`, and instead of having just the `yeoman-generator` keyword, it must have 2 keywords, `yeoman-generator` and `jhipster-blueprint`.
- A blueprint can only extend the following sub-generators (under the generators folder)
- client
- server
- entity
- entity-client
- entity-server
- entity-i18n
- spring-controller
- spring-service

## Import the generator-jhipster

A JHipster blueprint must have generator-jhipster as a dependency and should import the appropriate sub generator to override it.

```javascript
const chalk = require('chalk');
const ClientGenerator = require('generator-jhipster/generators/client');
...

module.exports = class extends ClientGenerator {
constructor(args, opts) {
super(args, Object.assign({ fromBlueprint: true }, opts)); // fromBlueprint variable is important

const jhContext = this.jhipsterContext = this.options.jhipsterContext;

if (!jhContext) {
this.error(`This is a JHipster blueprint and should be used only like ${chalk.yellow('jhipster --blueprint helloworld')}`);
}

this.configOptions = jhContext.configOptions || {};
// This sets up options for this sub generator and is being reused from JHipster
jhContext.setupClientOptions(this, jhContext);
}

get initializing() {
// Here we are not overriding this phase and hence its being handled by JHipster
return super._initializing();
}

// other phases of the sub generator
}
```

Any method beginning with _ can be reused from the superclass that is being extended, for example `ClientGenerator` in above sample.

Each JHipster sub-generator is made of multiple yeoman phases, each phase is a getter, `get initializing` for example. A blueprint can customize one or more phases of the sub-generator that it is overriding.

There are multiple ways to customize a phase from JHipster.

1) Let JHipster handle a phase, blueprint doesnt override anything.

```javascript
get initializing() {
return super._initializing();
}
```

2) Override the entire phase, this is when the blueprint takes control of a phase

```javascript
get initializing() {
return {
myCustomInitPhaseStep() {
// Do all your stuff here
},
myAnotherCustomInitPhaseStep(){
// Do all your stuff here
}
};
}
```

3) Partially override a phase, this is when the blueprint gets the phase from JHipster and customizes it.

```javascript
get initializing() {
const phaseFromJHipster = super._initializing();
const myCustomPhaseSteps = {
displayLogo() {
// override the displayLogo method from the _initializing phase of JHipster
},
myCustomInitPhaseStep() {
// Do all your stuff here
},
}
return Object.assign(phaseFromJHipster, myCustomPhaseSteps);
}
```

You can also access to JHipster's variables and functions directly from a Blueprint.

## Available variables and functions

### Variables from configuration:

You can access to configuration in `.yo-rc.json` which will consist of both the JHipster config and your blueprint config.

### Global variables:

You can use constants in [generator-constants](https://github.com/jhipster/generator-jhipster/blob/master/generators/generator-constants.js):

```
const javaDir = `${jhipsterConstants.SERVER_MAIN_SRC_DIR + this.packageFolder}/`;
const resourceDir = jhipsterConstants.SERVER_MAIN_RES_DIR;
const webappDir = jhipsterConstants.CLIENT_MAIN_SRC_DIR;
```

### Functions:

You can use all functions in [generator-base](https://github.com/jhipster/generator-jhipster/blob/master/generators/generator-base.js):

```
this.angularAppName = this.getAngularAppName(); // get the Angular application name.
this.printJHipsterLogo(); // to print the JHipster logo
```

**Note**: The functions in `generator-base.js` and variables in `generator-constants.js` are part of public API and hence will follow semver versioning. But other files like `generator-base-private.js`, `utils.js` etc will not follow semver versioning and might break method signature across minor versions.

## Registering a blueprint to the JHipster marketplace

To have your blueprint available in [the JHipster marketplace]({{ site.url }}/modules/marketplace/), you need to make sure you have the 2 keyword `yeoman-generator` and `jhipster-blueprint` in your published npm `package.json`.
If you find any entry in the marketplace which is not a JHipster module or blueprint, you can help to blacklist it by adding it to the `blacklistedModules` section of the [modules-config.json file](https://github.com/jhipster/jhipster.github.io/blob/master/modules/marketplace/data/modules-config.json) by doing a Pull Request to the [jhipster/jhipster.github.io project](https://github.com/jhipster/jhipster.github.io).

Your blueprint will become "verified" if the JHipster team verifies it.

Once you publish your blueprint to NPM, your blueprint will become available in our marketplace.
3 changes: 3 additions & 0 deletions modules/marketplace.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ <h1><i class="fa fa-shopping-cart"></i> Marketplace</h1>
<p>
<i>If you want to create your own module, <a href="{{ site.url }}/modules/creating-a-module/">here is the documentation</a>.</i>
</p>
<p>
<i>If you want to create your own blueprint, <a href="{{ site.url }}/modules/creating-a-blueprint/">here is the documentation</a>.</i>
</p>

<div ng-view></div>

Expand Down
2 changes: 1 addition & 1 deletion modules/marketplace/details/details.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

<button type="submit"
ng-click="list()"
class="btn btn-info btn-sm">Back to modules list</button>
class="btn btn-info btn-sm">Back to list</button>

<h2>{(module.package.name | jhiModuleFilter)}</h2>

Expand Down
6 changes: 3 additions & 3 deletions modules/marketplace/list/list.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<h2 ng-hide="loaded"> Loading modules...</h2>
<h2 ng-hide="loaded"> Loading modules and blueprints...</h2>
<div ng-show="loaded">
<h2>Available modules ({((modules | filter:searchText).length)}/{(modules.length)})</h2>
<h2>Available modules and blueprints ({((modules | filter:searchText).length)}/{(modules.length)})</h2>
<div class="form-group search-form ng-scope">
<input class="form-control search-field" ng-model="searchText" placeholder="Filter by module name or keyword" id="search-field">
<input class="form-control search-field" ng-model="searchText" placeholder="Filter by name or keyword" id="search-field">
<label class="fa fa-search inline-search" for="search-field"></label>
</div>
<div class="row" ng-repeat="module in modules | filter:searchText | orderBy:'-downloads'">
Expand Down
28 changes: 23 additions & 5 deletions pages/creating_an_app.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ sitemap:

_**Please check our [video tutorial]({{ site.url }}/video-tutorial/) on creating a new JHipster application!**_

1. [Quick start](#1)
2. [Questions asked when generating an application](#2)
3. [Command-line options](#3)
4. [Tips](#4)
1. [Quick start](#1)
2. [Questions asked when generating an application](#2)
3. [Using a blueprint](#5)
4. [Command-line options](#3)
5. [Tips](#4)

## <a name="1"></a> Quick start

Expand Down Expand Up @@ -154,7 +155,7 @@ The client-side framework to use.

You can either use:

* Angular version 5+
* Angular
* React

### Would you like to use the LibSass stylesheet preprocessor for your CSS?
Expand All @@ -179,13 +180,30 @@ You can find more information on our ["Running tests" guide]({{ site.url }}/runn

The [JHipster Marketplace]({{ site.url }}/modules/marketplace/) is where you can install additional modules, written by third-party developers, to add non-official features to your project.

## <a name="5"></a> Using a blueprint

JHipster 5 introduces the concept of a blueprint. Blueprints are JHipster modules that can provide custome client/server side templates that will override the ones from JHipster. For example, the [Kotlin blueprint](https://github.com/jhipster/jhipster-kotlin) replaces most of the Java server side code with Kotlin.

For example, to use the Kotlin blueprint pass the name of the blueprint like below while generating an app.

```bash
jhipster --blueprint kotlin
```

The name of the blueprint is saved in the `.yo-rc.json` and will be automatically used while executing sub-generators like `entity`, `spring-controller` and `spring-service`.

If a blueprint doesn't implement a specific sub-generator, it will be skiped and the JHipster templates for the same sub-generator will be used.

**Note:** An application can use only one blueprint, multiple blueprints are not supported yet.

## <a name="3"></a> Command-line options

You can also run JHipster with some optional command-line options. Reference for those options can be found by typing `jhipster app --help`.

Here are the options you can pass:

* `--help` - Print the generator's options and usage
* `--blueprint` - Specify a blueprint to use. For example `jhipster --blueprint kotlin`
* `--skip-cache` - Do not remember prompt answers (Default: false)
* `--skip-git` - Do not add the generated project to Git automatically (Default: false)
* `--skip-install` - Do not automatically install dependencies (Default: false)
Expand Down
Loading

0 comments on commit 23a7914

Please sign in to comment.