Import the project in the in eclipse (for development java purposes) and Visual studio Code (for Vue development).
├─┬ backend → backend module with Java/Spring Boot code
│ ├── src
│ └── pom.xml
│ └── target/site/jacoco/index.html → java unit tests coverage report
│ └── target/site/serenity/index.html → java module acceptance tests coverage report
│ └── docker → Docker and docker compose files
├─┬ frontend → frontend module with Vue.js code
│ ├── src
│ └── pom.xml
│ └── README.md
│ └── /test/unit/coverage/lcov-report/index.html → javascript unit tests coverage report
├─┬ swagger-vue-master → Swagger Vuejs API code generator with Axios
│ └── README.md
├─┬ perfectmatch-acceptance-testing-with-cucumber → Acceptance Testing with Nightwatch.js, Cucumber.js and BrowserStack
│ └── README.md
├─┬ junit-webtests → Automated web tests using Serenity, Cucumber and Maven
│ └── README.md
└── pom.xml → Maven parent pom managing both modules
Please keep in mind that this app uses an MongoDb running as an System service or as embedded (by default).
Execute the following commands in order to build all projects:
> mvn --projects perfectmatch spring-boot:run -Dspring.profiles.active=dev
Alternatively execute the java class <path_to_app>.Application
in the backend project.
Notice the dev profile activation in order to run an module that inserts data at load time for testing purposes.
Now go to http://localhost:8082/index.html#/ and the app should load.
All javascrip files (under the folder node_mdules) and java dependencies are resolved and no additional steps is required. You can refer to the file README.md, to just resolve Javascript dependencies independently.
Additional info can be found in specific project folder:
- Vue js module
- Swagger Vuejs Api code generator
- Acceptance Testing with Nightwatch.js, Cucumber.js and BrowserStack
- Automated web tests using Serenity, Cucumber and Maven
- Backend module
The webpack-dev-server, which will update and build every change through all the parts of the JavaScript build-chain, is pre-configured in Vue.js out-of-the-box! So the only thing needed to get fast feedback development-cycle is to cd into "C:\<PATH_TO_GIT>\.....\vue"
and run:
npm run dev
That's it, the root page should be automatically opened! Every change in the Vue.js files are automatically updated, if not just refresh the page. You should confirm the change in the Chrome dev tools:
- Ctrl + Shift + l
- Click on the Sources tab
- On the left list, navigate to webpack and choose the changed file
Notice that the port is not the same when the app is started from the backend module. The main purpose is to have independent process in order to change Js and Java files independently.
After the required change is made, just commit the changes and they should be correctly updated in the next build. The perfectmatch project pom is configured to copy the content of the ${project.parent.basedir}/frontend/target/dist
directoy, which has the most recent changes in the Vue.js files.
These plugins are required to be installed by machine administrators
Install vue-devtools Browser extension (https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd), and DejaVue (https://chrome.google.com/webstore/detail/dejavue/jpigngmphmclcmikmcbcfplgnhlnefbp?hl=en) get better feedback on the Vue.js objects,
e.g. in Chrome:
- Ctrl + Shift + l
- Click on the Vue tab
- On the left list, navigate to the required module and view the data state of the object
Application | Port |
---|---|
Spring Cloud Config Server | 8888 |
Netflix Eureka Naming Server | 8761 |
Application | URL |
---|---|
Spring Cloud Config Server | http://localhost:8888/perfectmatch-webapp/default http://localhost:8888/perfectmatch-webapp/dev |
Eureka | http://localhost:8761/ |
Install CodeMix (trial version) plugin for VueJs development. This is optional with Visual Studio Code. Note that with CodeMix plugin you lose the Vue Syntax Highlighting, after the trial expires´.
-
Install eclipse Java EE Photon Release (4.8.0)
-
Add proxy configuration:
Window - Preferences -> Network Connections -> Proxy Bypass -> add http://domain:port
- Install CodeMix plugin:
Help -> Install New Software -> http://www.genuitec.com/updates/codemix/ci/
- Configure installed NodeJs
Window -> Preferences -> Javascript -> Tern -> Server -> Node.js -> "Node.js install" select "-- Choose your node.js install --" -> C:\dev\tools\node
There is an issue installing Chrome driver from maven. As the workaround execute the following command line, with the proper user and password, in the vue project
> npm config set strict-ssl false
> npm install -l --proxy=http://<USER>:<PASS>@purl:8080 --https-proxy=http://<USER>:<PASS>@url:8080
> cd ..
> mvn clean install
[INFO] > node install.js
[INFO]
[INFO] PhantomJS not found on PATH
[INFO] Download already available at C:\Users\MACHAD1\AppData\Local\Temp\phantomjs\phantomjs-2.1.1-windows.zip
[INFO] Verified checksum of previously downloaded file
[INFO] Extracting zip contents
....
[INFO] Downloading https://chromedriver.storage.googleapis.com/2.41/chromedriver_win32.zip
[INFO] Saving to C:\Users\MACHAD1\AppData\Local\Temp\chromedriver\chromedriver_win32.zip
[ERROR] ChromeDriver installation failed Error with http(s) request: Error: tunneling socket could not be established, statusCode=407
[WARNING] npm WARN [email protected] No repository field.
[WARNING] npm WARN [email protected] scripts['server'] should probably be scripts['start'].
[WARNING] npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
[WARNING] npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
[ERROR]
[ERROR] npm ERR! code ELIFECYCLE
[ERROR] npm ERR! errno 1
[ERROR] npm ERR! [email protected] install: node install.js
[ERROR] npm ERR! Exit status 1
[ERROR] npm ERR!
[ERROR] npm ERR! Failed at the [email protected] install 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! C:\Users\machadojo\AppData\Roaming\npm-cache_logs\2018-09-11T14_49_28_475Z-debug.log
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 01:32 min
[INFO] Finished at: 2018-09-11T16:49:28+02:00
[INFO] Final Memory: 20M/243M
[INFO] ------------------------------------------------------------------------
[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] http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException
[ERROR]
[ERROR] After correcting the problems, you can resume the build with the command
[ERROR] mvn -rf :fxhub.mhubweb.nextgen.vue
- https://github.com/angelozerr/tern.java/wiki/Tern-Linter-ESLint
- https://github.com/vuejs/eslint-plugin-vue ()
- https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md
- eirslett/frontend-maven-plugin#652
- https://medium.com/skyshidigital/8-vuejs-plugins-to-speed-up-your-front-end-development-61528155f280
- https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1
- https://dev.to/rhymes/what-vuejs-framework-should-i-use-4nk1
- https://blog.bitsrc.io/11-vue-js-component-libraries-you-should-know-in-2018-3d35ad0ae37f
- https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet