Hygieia Specific,UI, Gulp - How To - gulp

Query related to opensource tool Hygieia. On the Gulp scripts https://github.com/capitalone/Hygieia/blob/v2.0.0/UI/gulpfile.js
Gulp serve serves the application. here are few queries i need help with
In version 1.5.0 gulp task runner had gulp serve:dist, which served only minified content, 2.0 does not seem to do that
gulp serve starts the app # port 3000, how do i control it for each instance, as i intend to run couple of instances(diff versions) on the same vm.
When UI is served # localhost:3000/ , all the content is served from
localhost:3000/# and localhost:3000/bower_components .. etc..
i want to move the content to be served under localhost:3000/WebApp/
So that all the URLs are under a specific Virt Directory.
Any pointers are greatly appreciated.
TIA,
Tx

your question not much clear. still if i understand your question correctly-
your current hygieia configuration working correctly. you just want to run multiple instances of same application.
for that you have to make changes in UI>gulpfile.js

Related

How can I use ReactJS as a static website?

I want to develop my static web application with React. I have just done with the Tic-tac-toe getting started tutorial. Are there anyways I can "compile" (or whatever the term is) ReactJS straight into my HTML file? So, far to run that ReactJS application I need to run it with a server from Yarn.
I prefer to not use CDN because I want to update and manage the dependencies.
Let say, for my starting point, I want to have that Tic-tac-toe game from official React getting started tutorial to be served with just one HTML file (CSS and JS in that one HTML file). I want to see if this is possible or not, so I don't care about the best practice for this question.
You should have a look at Gatsby JS
It's a static site generator for React. Probably that's what you're looking for.
Run npm run build or yarn build and see the output in the build folder. It generates static HTML, CSS and Javascript.
Sounds like you are using Yarn with create-react-app. If so you are running:
yarn start
Now run:
yarn build
See more info here: https://github.com/facebookincubator/create-react-app
The static web application will be built to a build folder. You will find all of the static assets there like JS, CSS and HTML.
I have tested. yarn build works only with a server. Even python3 -m http.server works. So, no! ReactJS downloaded from non-Bower package manager will not work without server out-of-the-box.

Testing local website with Protractor

I am developing simple website (html, css) and I want to write few tests against it in Protractor.
Is it possible to check that kind of website with Protractor? I have html file on my computer only. Should I run this website locally on server? I don't think I can run test on file directly.
Yes, its possible to open a stand-alone local html file without hosting it on a local server.You have to add this browser.resetUrl = "file:///"in your onPrepare() function and then a browser.get("file:///C:/Users/demo/test.html") would work
There are some good examples #this question - Opening a file with protractor
A common way to do it is to approach it in multiple steps:
build your application
run a local web server from the build directory (I think this is the part you are asking about)
run tests against your app served by the local web server
stop the local web server
Usually, this multi-step process is handled by a task runner like grunt or gulp. We use grunt, grunt-contrib-connect to serve from a directory, grunt-protractor-runner to run protractor from grunt.

How to use hexo server --draft and Livereload

I am writing draft blog posts using hexo. I am running the hexo server as follows:
hexo server --draft
This watches for changes in the draft folder and generates the draft posts which can be viewed at http://0.0.0.0:4000
The problem is I can't work out how to use live-reload while writing drafts.
With livereload I call
live-reload --port 9091 public/
And use use the javascript implementation with the browser
<script type="text/javascript" src="//localhost:9091"></script>
I can see why this doesn't work, live-reload is looking for changes to the public folder. With the server running in draft mode, I don't know what folder the html generated drafts are being stored in. I've searched my project structure and can't seem to see anything obvious. Any ideas?
Hexo can offer live-reload-like functionality via the'Browsersync-based' plugin, 'hexo-browsersync'.
There is actually also a hexo-livereload plugin, but the net, and hexo-browsersync's NPMJS rating, seem to favour the Browsersync Hexo plugin.
Christopher Martin's blog post 'Getting Started with the Hexo Blogging Framework', outlines the plugin's installation and usage, as well as many other helpful tips:
To install the hexo-browsersync plugin:
$ npm install hexo-browsersync --save
$ hexo server --draft --open #restart the server
This might possibly suit the OP's original question better than the accepted answer.
This is how I normally do this sort of thing:
hexo generate --draft --watch & live-server --port=4000 public
This generates the site in the public folder and watches for changes, whilst also serving said public folder with auto-updates.
Not exactly answering the specific question but maybe someone will find it useful.
Note: You will need to have live-server and hexo-cli installed globally, or locally if running via npm scripts.
hexo server serves the source version of the post not the public version. If you set livereload to watch the source folder livereload will work. I suggest setting livereload to use a 1 second or so delay before processing so the on the fly source generation to occur before reload is attempted.
Looking to the --draft option implementation at Github shows that it only extends the post processor to the _draft folder. So the place where it puts draft rendered files is the same it puts published posts.
However, hexo server does not save published posts in public directory as might be suggested by the question; public directory is populated by hexo generate command only. In fact hexo server does not save temporary files as it renders them on the fly.
I think live-reload will not work this way.

Disable aurelia-bundler just on dev machine?

I've been working on an Aurelia app without gulp and it has gone well. Now I want to use gulp b/c the page loads are terrible with 100+ separate files being requested. I install aurelia-bundler from the skeleton and can get it working using gulp. But there are two problems:
1. I have to gulp bundle after EVERY change to refresh the page
2. The error messages make no sense b/c everything is minified now.
I can deal with #1 b/c of gulp-watch (even though that still takes time), but I can't handle the minified files and not being able to debug my code.
So, is there and easy way to switch back to the non-bundled files for development on my machine and only use the bundled files when I deploy to Heroku server? It seems like aurelia-bundle now points to the dist folder by default.
Oh yeah, I tried modifying config.js to point to "src" instead of "dist" but it still looks for the aurelia-xxx.js file instead of the non-bundled files.
Thanks.
If you are using the latest build files you can gulp watch in dev which should use the src files without bundling - of course, this is slower, but in conjunction with browser-sync you shouldn't have to do loads of refreshes.
Check your paths.js and other config files against the skeleton if gulp watch is also bundling.

How to perform grunt remote debug in IntelliJ IDEA?

I build and run my typescript application by Grunt and connect(grunt-contrib-connect) and livereload plugins. While grunt compile .ts files, it also generate sourcemap. My application is oppening on google chrome. How can I remotely connect by Intellij Idea to this application that was run by Grunt and oppened in Chrome for perform debug?
This post is my last hope, that it is possible. Thanks
create a new javascript debug run configuration
in URL field, specify the URL of your client app (http://localhost:9001/index.html or whatever it looks like)
if your local project structure doesn't exactly match the app structure on server (for example, static files are served from <project_root>/public folder), specify remote URL mappings (see http://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserver)
that should be enough... Start grunt, and, when the server is up and running, debug the configuration above
Thank you. I found solution.
First of all, I need Jet Brains extension for Chrome.
I need to make configure debug mode "JavaScript debug" and specify URL that grunt will run and open application.
Run Grunt task that build and open application in browser.
Run debug mode that just reload same page under debugger already.
Don't forget enjoy it.
Since I use typescript, ability to debug in IDE was very important.