How to modify template in jHipster entity subgenerator for angular2? - node.js

I have got some work to modify default html generated by Jhipster for Angular2 more specifically,i want to modify styles for grid generated by Jhipster for Entity's.
I have gone through tutorial creating module in Jhispter documentation.
https://jhipster.github.io/modules/creating-a-module/
generator for creating subgenerator is also their can someone please give me pointers on this problem?
e.g
yo jhipster:entity Author
from above command jhipster creates all necessary files at server and client like JPA Entity,REST controller,Service, at client side it creates CRUD UI for Author entity using Angular2(i opted for anular2)
I want to modify client generation Code, i just want to modify HTML templates which gets generated by jhipster entity sub:generator

you need to run Yarn and start modifying your author.component.html
which will automatically refreshed in your Browser.
https://jhipster.github.io/development/

You could also consider using git prior to running the generator and then reverting the server side code once the generator has ran

Related

Jhipster Blueprint - Override base generators templates

I am developing a jhipster blueprint (base generator 7.8.1) that will have a completely different angular UI with Jhipsters spring-boot backend with customization. I have got the UI part working (using mock backend) and now, I am trying to customize the server sub-generator.
My needs are to be able to modify the base generator templates and also add new templates/files.
Very first use case I am trying to solve is to modify the SecurityConfiguration_reactive.java.ejs (basically add more routes). I have tried the following option in the blueprint's generators/server sub-generator and it worked,
Create an index.js file, delegate all the priorities to the base generator except the writing priority. The writing phase will basically call the base generators writeFilesToDisk(serverFiles) method where the serverFiles is from the blueprint.
Copy the files.js from the base generator to the blueprint - this is the serverFiles from the previous call
Copy the template from the base generator (follow the same folder structure) and make the customization
I also came across this post that had a better approach but its a little old. So, is there a better way to achieve this?
Any help is greatly appreciated...

How does NSwag works in ASP.Net Zero framework?

I tried working on an ASP.Net Zero and it works and I have used its built in PowerTools to create CRUD functionalities of the system. And I tried adding some manual front-end Angular UI in the client side of the application. I'm just not sure what will happen if I run the "refresh.bat" command in NSwag if it will erased all of my manually created UI and service proxies. Please help me.
Create a git branch and examine changes after you try it. Discard all if not acceptable.
Refresh.bat will update and generate service proxy for implemented api on .Net backend.
Always let your Api server running whenever u want to run refresh.bat.

JHipster - Can I add websocket support to my existing generated application?

I have an existing JHipster application that was generated without adding the websocket option. A need has come about for this functionality to be added to the application for a realtime data view, is there a way to bolt this functionality into my existing generated app?
I tried adding toggling on the websocket: false value in the .yml file and re-running yo jhipster but this did not add in any new files and the example user tracker was not added into the project so assuming this cannot be accomplished this way
Thanks
The generator is looking for settings in the .yo-rc.json file which is located at root level in the folder of your app. Depending on your IDE it can be that is not shown and you need to show it over otehr perspective or to view it in a terminal/cmd.
In the .yo-rc.json you will need to change the value of the websocket property from no to spring-websocket i.e.
"websocket": "spring-websocket",
Now when you run your generator it should generate the parts need it for websockets. Also have a look at the jhipster doc for websockets

JHipster, Customization of generated code

i'm newbie in JHipster and i'm trying to figure this, when i create a new entity JHipster generates several files, angular, html and java classes, now if i want a common code for all this generated code i must edit each time that i use the yeoman generator? what i want is:
Custom Index template, and pages, is secure to edit them?.
Customize the entity tables, entity forms using angular, maybe extending yeoman generators
Customize generate java classes, maybe i think using AOP
So i need to edit each time for each generated code? and is a good practice this or what i want? for clarify more i want to use a Custom Bootstrap/angular Dashboard template like Minovate, i see how to customize bootstrap in the documentation but not about what i'm asking for, Thanks.
JHipster is just a code generator, once generated the code is yours.
For angular screens I would say do as much as you can in CSS/SASS.
But it's very likely that you will need to build some screen mixing several entities and change the structure of entity screens.
So you should rather consider them as a starting point and do your own stuff in another folder so that it does not get overwritten by next re-generations.
This way you can still update your entity definitions in .jhipster folder and re-run yo jhispter:entity <entity name> on the entities you modified.
Customising java Entities is usually much simpler and you can easiliy achieve this by merging generated code with git and defining your service classes.
AOP seems overkill here.
Extending a yeoman generator is a lot of work.
I suggest to use some VSC (git, subversion or whatever you like) have a branch dedicated to plain jhipster generated code and another one where you make customization.
Eventually regenerate on jhipster branch and merge back on yours.
You should at least reduce manual intervention.

what's the best way to implement loopback on an existing node.js project

I have successfully created a few loopback projects using
slc lb project *myproject*
command but now I have a pre-existing node project that I would like to use loopback in.
Is there a recommended best practice around the migration to loopback?
Is it just a matter of including the relevant module references in my package.json and running npm install? Or do also need to make some changes to my app.js?
Will I need to manually create the models.json and datasources.json?
Any insignts appreciated.
Edit: I added the relevant loopback modules to my package.json, replaced my express requires with loopback, manually added a datasources.json, and models.json and it all seems to have worked.
The only remaining issue is that when I bring up my explorer view the shell comes up but no api endpoints even though I have models defined in my models.json file.
Edit: I added the relevant loopback modules to my package.json, replaced my express requires with loopback, manulally added a datasources.json, and models.json and it all seems to have worked.
The only remaining issue is that when I bring up my explorer view the shell comes up but no api end points even though I have models defined in my models.json file.
To load and process models.json and datasources.json, you have to "boot" your LoopBack application.
Assuming you have installed loopback 2.x in your project, and you want to use the old 1.x project layout scaffolded by slc lb, here are the instructions:
Install loopback-boot 1.x. Make sure you are not using 2.x or newer, as 2.x changed the project layout.
npm install --save loopback-boot#1.x
Modify your main application file (e.g. app.js) and add the following lines:
// at the top
var boot = require('loopback-boot');
// after you have created `app` object
// and configured any request-preprocessing middleware
boot(app, __dirname);
Please consider using the new 2.x project layout, see Migrating apps to version 2.0 for information on how to migrate your "models.json" into the new format.
Is there a recommended best practice around the migration to loopback?
I suggest scaffolding a new app using slc loopback and moving your old apps files to the relevant directories.
is it just a matter of including the relveant module references in my package.json and running npm install or do also need to make some changes to my app.js?
This will be part of the migration process, you will also need to configure app.js to meet your needs (like setting up middleware, etc)
will I need to manually create the models.json and datasources.json?
No, when you scaffold the app using slc loopback, they will be automatically generated in the new project.
The only remaining issue is that when I bring up my explorer view the shell comes up but no api end points even though I have models defined in my models.json file.
Did you create the files in commmon/models manually? Try creating them through slc loopback:model and the tool will add the configurations in server/model-config.json for you.

Resources