jhipster / jhipster-vuejs

A Vue.js blueprint for JHipster. It will use Vue.js as the frontend library!

Introduction

This is a JHipster blueprint.

Prerequisites

As this is a JHipster blueprint, we expect you have JHipster and its related tools already installed:

• Installing JHipster

Installation

With NPM

To install this blueprint:

npm install -g generator-jhipster-vuejs

To update this blueprint:

npm update -g generator-jhipster-vuejs

With Yarn

To install this blueprint:

yarn global add generator-jhipster-vuejs

To update this blueprint:

yarn global upgrade generator-jhipster-vuejs

Usage

To use this blueprint, run

jhipster --blueprints vuejs

Using Docker

Download the Dockerfile:

mkdir docker
cd docker
wget https://github.com/jhipster/jhipster-vuejs/raw/master/docker/Dockerfile

Build the Docker images:

docker build -t jhipster-generator-vuejs:latest .

Make a folder where you want to generate the Service:

mkdir service
cd service

Run the generator from image to generate service:

docker run -it --rm -v $PWD:/home/jhipster/app jhipster-generator-vuejs

Run and attach interactive shell to the generator docker container to work from inside the running container:

docker run -it --rm -v $PWD:/home/jhipster/app jhipster-generator-vuejs /bin/bash

Create a new component page

To create a new Vue.js empty page, run

jhipster --blueprints vuejs page

Running local Blueprint version for development

During development of blueprint, please note the below steps. They are very important.

1. Clone the projects

You'll probably need the current master of generator-jhipster :

• fork generator-jhipster: https://github.com/jhipster/generator-jhipster/fork
• clone locally your fork: git clone https://github.com/<your_username>/generator-jhipster
• cd generator-jhipster
• git remote add upstream https://github.com/jhipster/generator-jhipster
• so you'll be able to update regularly your fork, using git fetch upstream && git checkout master && git rebase upstream/master
• npm ci
• npm link

Then, about jhipster-vuejs :

• fork jhipster-vuejs: https://github.com/jhipster/jhipster-vuejs/fork
• clone locally your fork: git clone https://github.com/<your_username>/jhipster-vuejs
• cd jhipster-vuejs
• git remote add upstream https://github.com/jhipster/jhipster-vuejs
• so you'll be able to update regularly your fork, using git fetch upstream && git checkout master && git rebase upstream/master
• npm ci
• npm link
• npm link generator-jhipster

2. Create a new folder for the app to be generated and link JHipster and your blueprint there

mkdir my-app
cd my-app
npm link generator-jhipster-vuejs
jhipster -d --blueprints vuejs

License

Apache-2.0 © Deepu K Sasidharan

jhipster-vuejs's Issues

JHipster Pacman on load

On latest main generator release, @sabrinapayet adds a wonderful Pacman animation during front loading. Even if Vue loads quickly, it would be cool to have the same behavior.

@sabrinapayet could you help on this one?

Login with Firefox

We can't log with Firefox, as we can't focus the password field

Refactoring: kebab case

The name of components, services etc are not consistent.
I think we should stick to kebab case for all and start with lower case.

Are you ok @sahbi-ktifa @hdurix ?

Development status update

Can the author update on the development status - how (in)complete is the current work? What are some plans, todos, roadmap?

In case, we happen to choose Vue, I will be happy to contribute to this project.

Add ElasticSearch support on entities

Add sort and pagination to entity page

Using these links:

• https://bootstrap-vue.js.org/docs/components/pagination/
• https://alligator.io/vuejs/implementing-infinite-scroll/ (juste have a look at it)

Alert / Notification support

We should notify users when creating entities, etc...
We can do a jhi-alert-error like component which will display a notification upon creation, modification, ...

Add Travis sample for session based authentication

If I'm right, Travis does not test any project with authentication mechanism other than JWT.

I just noticed than the option "session" does not compile (since the use of TypeScript I think): I will look at it.

Unable to run the tests

First I clone the project
git clone https://github.com/jhipster/jhipster-vuejs.git

I run
npm install

I can't run test : npm test, I get :

    Default with Maven
      1) "before all" hook
    Default with Gradle
      2) "before all" hook
    noi18n with Maven
      3) "before all" hook
    Elasticsearch and Protractor
      4) "before all" hook


  0 passing (873ms)
  4 failing

  1) VueJS JHipster blueprint
       Default with Maven
         "before all" hook:
     Uncaught Error: ERROR! The generator-jhipster-vuejs blueprint provided is not installed. Please install it using command npm i -g generator-jhipster-vuejs.
      at Environment.error (node_modules/yeoman-environment/lib/environment.js:157:40)
      at module.exports.error (node_modules/generator-jhipster/generators/generator-base.js:2444:18)
      at shelljs.exec (node_modules/generator-jhipster/generators/generator-base-private.js:794:22)
      at /Users/arnaudfreismuth/Documents/Ippon/jhipster-vue/jhipster-vuejs/node_modules/shelljs/src/exec.js:124:9
      at ChildProcess.exithandler (child_process.js:301:5)
      at maybeClose (internal/child_process.js:978:16)
      at Socket.stream.socket.on (internal/child_process.js:395:11)
      at Pipe._handle.close (net.js:616:12)
[...]

npm ERR! code ELIFECYCLE
npm ERR! errno 4
npm ERR! [email protected] test:unit: `mocha --timeout 20000 --slow 0 --reporter spec "test/client.spec.js"`
npm ERR! Exit status 4
npm ERR!
npm ERR! Failed at the [email protected] test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/arnaudfreismuth/.npm/_logs/2018-12-06T15_49_25_481Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 4
npm ERR! [email protected] test: `npm run test:unit -- test/*.spec.js`
npm ERR! Exit status 4
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/arnaudfreismuth/.npm/_logs/2018-12-06T15_49_25_535Z-debug.log

Proper directory names in project's ReadMe file

Would you consider update Running local Blueprint version for development section in your doc and provide full path and correct folder names?

First two steps gives me same error

C:\Users\user\AppData\Roaming\npm\node_modules\generator-jhipster-vuejs>npm link
npm ERR! Link target resolves to the same directory as link source: C:\Users\user\AppData\Roaming\npm\node_modules\generator-jhipster-vuejs

Update to use Typescript with TSX

• Replace babel with typescript compiler
• Use the VueCLI where possible to setup everything
• Tsx or html for templates
• Setup Tslint , prettier (copy from React config if possible)

Add entity client unit tests

Add administration pages

Add all administration pages (audits, metrics, ...)

Clear login and password in modal

Here all steps:

1. go into the application and log in
2. then, log out
3. if you want to log in, you'll see all fields are already filled with login and password information. It shouldn't !

Setup protractor tests (as close as possible to React)

Add vue-class-component for Account part

I've started to work on this part.

Documentation Error

From the README
jhipster -d --blueprint vuejs
Seems to give error.

Instead:
jhipster -d --blueprint generator-jhipster-vuejs
Worked for me.

If it is an error in the README, please update.

Replace moment?

I know we want to be very consistent with angular and react but maybe we can try to replace the heavy moment bundle with date-fns maybe. What do you think?

jhipster does'nt recognize vuejs generator

jhipster does'nt recognize vuejs generator after launching the command "jhipster --blueprint vuejs"
jhipster display the message
"Trying to use blueprint generator-jhipster-vuejs
WARNING! No blueprint found for client falling back to default generator"

choices are anly angular 6 or react

I followed instruction to intall "npm install -g generator-jhipster-vuejs"

Add vue-class-component

Setup travis tests for blueprint

@pascalgrimaud would appreciate your help here. I believe it will be very similar to the Travis tests for the blueprint generator

JHipster dependencies in generated application

When generating a VueJS application, the package.json doesn't contain generator-jhipster or generator-jhipster-vuejs.
We need to add this, once the 1st release is done. Otherwise, it will failed during the npm install

Add JWT mechanism

As it is the default option, the JWT option should work. Seen with @sahbi-ktifa, the only working option for now is the session one.

The page always jumps to 'error.html'

Sorry, I am bothering you again. I still don't want to give up this plan.
Depending on your help, I successfully generated the vue code in my project. I can also enter 'npm start' to access the page from the command line.
But the current problem is that when I started it with 'mvn springboot:run', there was no error in the background, but I always jumped to 'error.html' when I visited ‘localhost:8080’. This problem has made me crazy.

Consistency in EditorConfig/Prettier configurations

There is inconsistency in the tab style (2 or 4 spaces) between the generator code, the generated code and what it is defined in the .editorconfig of the generated app.

• Code is written with 4 spaces in the generator.
• Then prettier (I think) transforms the 4 spaces in 2 spaces
• Then .editorconfig force to use 4 spaces

We should use the same rules as react: 2 spaces everywhere (for .ts).

Feature Set, Vue CLI and some general question

• What features do we want to support?
• Should we build upon vue-cli and if yes which feature do we select?
• Do we want to use typescript or not?
• How to start best? Doing a sample jhipster project without client and build vue(cli) based client on that?

What do you think?

Questions about vue and jhipster

I want to use jhipster to quickly build a springboot project. The company requires the front end to use vue, but the jhipster front end is built by angularjs. Can you give me some advice? thank you very much！

Language not working fine

Generate a project with 2 languages.
When changing the default language and navigating in the application, the new language is not persisted, as it is back to the default language.

Review webpack configuration

• Webpack prod build should works
• Add BrowserSync to webpack dev build

Build with prod profile: problem with language

When building in production, we lost all languages

Review navbar integration with BootstrapVue

Currently, navbar is not properly integrated. Use BootstrapVue good practice to make it nicer.

Add vue-class-component for UserManagement

Add for:

• UserManagement
• UserManagementEdit
• UserManagementView

And associated services

Add unit tests for the generator

Lets add some unit tests similar to https://github.com/jhipster/generator-jhipster/pull/8365/files

Followed the install instructions and it isn't working.

Followed the install instructions and it isn't working.

Is this a version issue? Please specify in the in the readme which version of jhipster and node it was tested against.

$ node -v
v8.12.0

$ npm -v
6.4.1

$ jhipster --version
Using JHipster version installed globally
5.3.4


$ npm i -g generator-jhipster-vuejs                                                                                                                                                                      
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5                                                      
npm WARN deprecated [email protected]: This package is unmaintained. Use @sinonjs/formatio instead                                                                                                              
+ [email protected]                                                                                                                                                                             
updated 1 package in 23.038s     

$ jhipster --blueprint vuejs


Welcome to JHipster v5.3.4
Application files will be generated in folder: /home/luis/third-party/easy
 _______________________________________________________________________________________________________________

  Documentation for creating an application is at https://www.jhipster.tech/creating-an-app/
  If you find JHipster useful, consider sponsoring the project at https://opencollective.com/generator-jhipster
 _______________________________________________________________________________________________________________

events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: ERROR! The generator-jhipster-vuejs blueprint provided is not installed. Please install it using command npm i -g generator-jhipster-vuejs.
    at Environment.error (/home/luis/.nvm/versions/node/v10.5.0/lib/node_modules/generator-jhipster/node_modules/yeoman-environment/lib/environment.js:157:40)
    at module.exports.error (/home/luis/.nvm/versions/node/v10.5.0/lib/node_modules/generator-jhipster/generators/generator-base.js:2060:18)
    at shelljs.exec (/home/luis/.nvm/versions/node/v10.5.0/lib/node_modules/generator-jhipster/generators/generator-base-private.js:697:26)
    at /home/luis/.nvm/versions/node/v10.5.0/lib/node_modules/generator-jhipster/node_modules/shelljs/src/exec.js:124:9
    at ChildProcess.exithandler (child_process.js:298:5)
    at ChildProcess.emit (events.js:182:13)
    at maybeClose (internal/child_process.js:961:16)
    at Socket.stream.socket.on (internal/child_process.js:380:11)
    at Socket.emit (events.js:182:13)
    at Pipe._handle.close (net.js:595:12)
Emitted 'error' event at:
    at Environment.error (/home/luis/.nvm/versions/node/v10.5.0/lib/node_modules/generator-jhipster/node_modules/yeoman-environment/lib/environment.js:159:15)
    at module.exports.error (/home/luis/.nvm/versions/node/v10.5.0/lib/node_modules/generator-jhipster/generators/generator-base.js:2060:18)
    [... lines matching original stack trace ...]
    at Pipe._handle.close (net.js:595:12)

Refactoring: tests files location

To be consistent with Angular and React, the generated test files should be in src/test instead of src/main

Are you ok with that @sahbi-ktifa @hdurix ?

Move all JavaScript scripts to TypeScript dedicated files

Use service injection instead of mixin

Runs well but error when build.

The link version of this blueprint works well when run in dev mode, but fail when npm run build or mvn -P prod clean package

it says

[INFO] > node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js "--config" "webpack/webpack.prod.js" "--profile"
[INFO] 
[ERROR] sh: line 1:  3259 Killed                  npm run webpack:prod:main
[ERROR] npm ERR! code ELIFECYCLE
[ERROR] npm ERR! errno 137
[ERROR] npm ERR! [email protected] webpack:prod: `npm run cleanup && npm run webpack:prod:main && npm run clean-www`
[ERROR] npm ERR! Exit status 137
[ERROR] npm ERR! 
[ERROR] npm ERR! Failed at the [email protected] webpack:prod script.
[ERROR] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[ERROR] 
[ERROR] npm ERR! A complete log of this run can be found in:
[ERROR] npm ERR!     /root/.npm/_logs/2018-11-23T05_34_15_302Z-debug.log
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 02:16 min
[INFO] Finished at: 2018-11-23T13:34:15+08:00
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.6:npm (webpack build prod) on project jhipster: Failed to run task: 'npm run webpack:prod' failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 137 (Exit value: 137) -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException

and in the log file: /root/.npm/_logs/2018-11-23T05_34_15_302Z-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/root/jhipster/vue/my-app/node/node',
1 verbose cli   '/root/jhipster/vue/my-app/node/node_modules/npm/bin/npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'webpack:prod' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prewebpack:prod', 'webpack:prod', 'postwebpack:prod' ]
5 info lifecycle [email protected]~prewebpack:prod: [email protected]
6 info lifecycle [email protected]~webpack:prod: [email protected]
7 verbose lifecycle [email protected]~webpack:prod: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~webpack:prod: PATH: /root/jhipster/vue/my-app/node/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/root/jhipster/vue/my-app/node_modules/.bin:/root/jhipster/vue/my-app/node:/usr/lib64/qt-3.3/bin:/opt/node/bin/:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:
9 verbose lifecycle [email protected]~webpack:prod: CWD: /root/jhipster/vue/my-app
10 silly lifecycle [email protected]~webpack:prod: Args: [ '-c',
10 silly lifecycle   'npm run cleanup && npm run webpack:prod:main && npm run clean-www' ]
11 silly lifecycle [email protected]~webpack:prod: Returned: code: 137  signal: null
12 info lifecycle [email protected]~webpack:prod: Failed to exec webpack:prod script
13 verbose stack Error: [email protected] webpack:prod: `npm run cleanup && npm run webpack:prod:main && npm run clean-www`
13 verbose stack Exit status 137
13 verbose stack     at EventEmitter.<anonymous> (/root/jhipster/vue/my-app/node/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (/root/jhipster/vue/my-app/node/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:962:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
14 verbose pkgid [email protected]
15 verbose cwd /root/jhipster/vue/my-app
16 verbose Linux 3.10.0-862.14.4.el7.x86_64
17 verbose argv "/root/jhipster/vue/my-app/node/node" "/root/jhipster/vue/my-app/node/node_modules/npm/bin/npm-cli.js" "run" "webpack:prod"
18 verbose node v10.13.0
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 137
22 error [email protected] webpack:prod: `npm run cleanup && npm run webpack:prod:main && npm run clean-www`
22 error Exit status 137
23 error Failed at the [email protected] webpack:prod script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 137, true ]

Migrate entity generator

Migrate entity generator templates to vueJS

When will the stable version be released?

When will the stable version be released?

Finalize i18n support

• Retrieve languages dynamically
• Disable translation if not not available

Refresh redirects you automatically to home page

When refreshing a page, you are automatically redirect to homepage.

Review component architecture

• Use multiple files instead on single file component (styles, template, js)
• Stick to Angular/React directory tree

JWT logout does not work properly

When logging out, localstorage is not cleared and a simple page refresh logs you again.

Cleanup and align with decided architecture

Make sure the following are followed, update and align where necessary

• VueJS completely in Typescript
• Tsx for templates
• Bootstrap vue
• Vuex for state management
• Vue Router
• Vue CLI as much as possible
• Axios for HTTP
• Vuei18n if it can be used without rewritting current i18n files, else use a transformation step or write our own i18n adapter like in React
• Sass only
• Jest for unit tests
• Protractor if it works without any additional work else we can switch to Cypress
• Tslint , prettier

Use sinon for mocking axios

I think we should sinon rather than jest for mocking axios in unit tests.

It's really hard to mock properly axios with the couple Jest & TypeScript. For now, we have something like:

import axios from 'axios';

const mockedAxios: any = axios;

jest.mock('axios', () => ({
  get: jest.fn(),
  put: jest.fn()
}));

mockedAxios.get.mockReturnValue(Promise.resolve({}));

But as it's cast as any, it's not really TypeScript friendly...

It's how it is done in react tests: https://github.com/jhipster/generator-jhipster/blob/master/generators/client/templates/react/src/test/javascript/spec/app/shared/reducers/application-profile.spec.ts.ejs#L79.

Make use of bootstrap-vue

Any reason the project doesn't use https://bootstrap-vue.js.org ?

Handle relationship between same entity

There is a bug when an entity has a relationship to the same entity, I found it by importing this JDL file: https://github.com/jhipster/jdl-samples/blob/master/simple-online-shop.jh#L42

The issue is that the service for the given entity is imported twice, I'm sure it's better handled in Angular/react, we should use the same mechanism for this particular case.

Setup testing with Jest

Jest setup for VueJS (copy from React if possible)

JHipster family generation

Would be nice if we had the random hipster during generation as main generator does!

@atomfrede could you look at it as you did it in the main generator?