Is it possible to enable LiveReload of static files in IntelliJ IDEA community which are changed from external tool like WebStorm?
Context:
I use IntelliJ to run Spring web app with frontend static files and WebStorm to modify them. My issue is that every time I make change in WebStorm, I have to focus to IntelliJ window and only then I'm able to see these changes in browser.
Related
In IntellIJ not long ago I was able to make changes to my html/thymeleaf files and hit 'Build Project' and Spring Boot didn't have to restart the entire app. It would showcase the changes in my web browser (Firefox, Chrome). I have researched and tried a variety of changes and can't seem to find the issue/error to get me back to faster, efficient frontend productivity.
It's only a setting inside of IntelliJ Idea. You can see here what you need to set, and to have in a build.gradle or pom file.
I've created a basic Vue.js app from VS2017 template.
Everything is working, but I cannot debug any code.
Could You explain why this happens and is there any workaround?
debugger
Vue is a front-end framework, which means it runs inside a browser, not locally (NodeJs). The best way to debug Vue.js application is to install a VueDevtolls from chrome's app store. Install this, it will help you accelerate your development process.
On a component you want to debug with, right click inspect, on the dialog appeared there should be some tags, find the Vue option and click it, you will see all data flows within any Vue components.
alternatively, if you really prefer break points, you can set up a webpack (if you created your vue project using #vue/cli then its already there), and set a break point inside the sources tag on the chrome's inspection dialog.
It is most certainly possible.
All you have to do is start the browser in debug mode (--remote-debugging-port=9222) and set it (Chrome or Edge) as a Debug target (Attach the debugger to it).
https://learn.microsoft.com/en-us/visualstudio/javascript/debug-nodejs?view=vs-2019
Actually what made me wonder was that the template you used should be preconfigured for debugging without the need of anything else. There is a catch however, due to the specifics of Vue packaging with WebPack there is a problem with resolving sourcemaps correctly. See: https://developercommunity.visualstudio.com/content/problem/520247/vue-app-in-vs-2019-cannot-debug-javascript-code.html (follow the links in the discussion there). I am not sure if these issue can be resolved in Visual Studio however. I plan to ask about it, for now it can be resolved in Visual Studio Code by overriding the Source Map Paths:
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*",
"webpack:///*": "*",
"webpack:///./~/*": "${webRoot}/node_modules/*"
}
using the following recipe: https://github.com/Microsoft/vscode-recipes/tree/master/vuejs-cli
What wasn't mentioned in the recipe however is that the maps need to be manually built beforehand with vue-cli-service build referenced as preLaunchTask in launch.json (or eventually, should the override be possible in Visual Studio 2017/2019 in <PostBuildEvent> of .njsproj).
I am currently working with IntelliJ IDEA and I try to debug gwt components directly in the IDE.
I know I can use Chrome DevTools to debug, but it's always a pain, when the variables names change and it takes quite a long time to debug.
I thing I have seen somewhere the fact that you can directly debug your component in IntelliJ but I am not sure where I have seen that.
I am in superdevmode but when I add a breakpoint in my java class in IntelliJ it does not get validated and does not stop in IntelliJ. It only works in Chrome.
Here is my gwt configuration
Thanks a lot.
Thoma
It sure does work from within IntelliJ.
One thing I noted in your screenshot : Set a checkbox with "with JavaScript debugger".
That is the only thing I see different with my setup, in which breakpoints work in IntelliJ, and in the browser.
I want to run my cordova app in the browser (not ripple emulator, but directly in the browser). One way of doing it I found on SO and it's simply set up IIS to the www folder. That works pretty fine, but I was wondering if it's possible to add a platform for the browser directly, so that it runs on F5. I am not very experienced at it, but I saw that e.g. in raw Ionic tools you can do "ionic serve" and it starts the web server and opens the browser. I suppose it runs node behind the scenes. It there an easy way to do that in Visual Studio either via node or IIs?
I do not think that it is possible to add a "browser" environment in Visual Studio or even native Cordova. If you really need such a functionality, you could use IBM MobileFirst (which I would not recommend, as long as you are not using their server, too).
I personally have no need of F5 functionality in Visual Studio. Just save, go to the browser and press F5 there. For debugging, I am using Chrome with the developer tools.
BTW: I do not set up IIS to the www folder, but to the project folder. I am doing this, because I am using TypeScript as script language. The TypeScript files are beside the www folder. With my setup, Chrome is able to find the TypeScript source corresponding to the JavaScript code.
right click on the index.html file and then select Open With..-> add->
then select the browser from available programs and then click on OK
To open your cordova app in a browser while using Visual Studio 2015, I suggest using Gulp + BrowserSync:
Download browser.sync from NPM. The best way to download is to add it to package.json and automatically download it.
{
"name": "content_md_app",
"version": "1.0.0",
"devDependencies": {
"gulp": "3.9.0",
"browser-sync": "2.10.0",
},
"dependencies": {
}
}
Add a gulp task to make launching easier. Create a gulpfile.js in the project root and add task. Example gulp task:
gulp.task('browser.sync', function () {
browserSync.init({
server: {
baseDir:"./www/"
}
});
// Note. you can add browserSync.reload to the tasks runner explorer array to make
// all browsers reload after a build is complete.
});
Use Task Runner Explorer to launch the gulp task manually or automatically.
If you are using phonegap to test your app, you may type "phonegap serve" in command line NOTE: your cd has to be your application file path.
Then you may see the ip address:port number which can be used in browser,android and ios platform.
Example:
You can create an IIS node, for example http://localhost/cordovaApp, I use this approach in one of my project and it's really conveniently.
I am developing a Grails app in Groovy/Grails Tool Suite. I start my server by simply running the vFabric tc Server that comes built in. Unfortunately, when I make css changes, the entire server reloads. This doesn't happen with gsp changes. How can I fix this?
You probably don't need to deploy to tc server if you're developing your app. Try using 'run-app' (right click your project, select 'run as' or 'debug as' and then choose 'run-app').
Or you can just open a grails prompt and do 'run-app' from there.