IDEA + Grunt - how to Live Edit JavaScript - javascript

Having an AngularJS app of basic structure - components, providers, services.. many separated .js files.. I use a grunt taks to compile them into single .js file eg: application.js?v${build}
To save time, I use IDEA plugin "Live Edit", it reflects all changes in .html real-time to browser.
All connected by JavaScript Debug config via "JetBrains IDE Support" plugin with Chromium web browser. All those work fine.
Now the problem: I cannot live reload changes in angular/JS. After every change I have to manually run grunt task to compile angular to single js and hit F5 in browser. (I know it is not a big deal, but image doing that 1000 in a day :) Any help appreciated!
PS: I can debug the JS, debugger stop correctly on breakpoints set in IDEA IDE.

How about grunt plugins for watching changes and using browser sync for reload? There are also other approaches like using yeoman for creating structures and serving them with grunt automatically.

Related

Make a React WebPage for local use

I started coding recently in JavaScript and started to make a little WebPage that's am gonna present it to a Client.The thing is that you need a server to run the webPage, I can't make the client open one each time ... (I could have gone for another language to make it Offline and easier, but I wanted to try JS for the GUI and performance).
So I thought about making some sort of a .bat file to open the server,Open the html file,when html is closed, the servers shuts down.(I know NOTHING about .bat files...)
after a little research I found that I can do it using Python and it's easy,but even then , I have to install Py. on the clients computer and I want to avoid that.
And more over, I found that my App doesn't work on Python's server or for the LiveServer extention from VS Code. (Yes I am new to React, I used npm to download a WebPackage, Used 'npm start' for the server and it works fine, it must be a probleme in the html when when importing js or when using ReactDOM.render).
This might be a little complicated but please if anyone have a suggestion then I will be grateful.
If you are using create-react-app, You can run yarn build and it will create the production build in your build folder. just run index.html in a browser and it will run the website without any server.
I think you should use Electron it helps you to build cross-platform desktop apps with JavaScript, HTML, and CSS.
I've used phpDesktop for building a desktop application using PHP, but this is better in every aspect.
ElectronJS Homepage
This is a great Electron Crash Course

Is there a thing such as "packaged web app"?

Let's say I have a HTML/JS application, which is on a website and runs without any server-side component (except the web server, of course). So it's basically just a bunch of .html, .css and .js files (and some others, like images or SQLite databases)
Someday, an user comes to me to ask me if I can make an offline version, so they can access the app when they are offline.
My first reaction would be to provide them all the files of the app in a .zip file or something, but this is not really good: it's not "clear" to an average user, and the files and code are apparent (which could be "dangerous" if the user edits or deletes them by accident).
So I was wondering: is there a kind of format that would makes me able to store the files of the app in a packaged file?
The file would be something like a .zip file, but when you click to the file, instead of opening up the archive, it opens the /index.html (or similar) which is inside.
So for the user, it would be similar to open an .exe or a single .html file, but still that's not a native app, as that's still a browser app.
Given that I know about:
Apache Cordova; but most of the time, I just use the browser functions, and I don't have a need to use advanced native functionalities;
UWP and PWA, but I don't know if it's exactly what I want (I imagine it as a mix of website and mobile app, but I'm surely wrong);
Open Web App (a standard from Mozilla), but based on what I've read about it, it seems deprecated and not used anymore. Plus, I don't really look forward to "certify" my app... I just want to package some files.
PWA I don't think is a solution to your problem as you wont be able to redistribute the code as an executable package.
UWP would be too Windows specific and might make you lose the platform independence that you already have since you are using plain HTML and JS, plus from what I understand you would need to distribute the app on Windows Store.
I believe packaging as an Electron app would be the best solution as you can provide executable files that can be executed in almost all platforms.
Electron would be the best solution for you. I had a client that first wanted to run app on php server and eventually they figured out they need it as a desktop app. It was easy to rewrite php stuff to node and package as Electron app. You have access to everything files, system etc. so you can do more if needed.
Another solution would be to just inline everything into a single html file.

Browserify bundles

Every time we release a new version of our software which is bundled using Browserify, we are finding that we need to ask our users to clear their cache using the regular methods of CTRL+F5 or diving into the browser settings. It is not ideal when there are a thousand or so users. We are trying to work out a way that we can perhaps get around this. I am open to all sorts of options.
Our project is ReactJS based, so runs in the browser and connects to back end services via a RESTful API. We do track which version is loaded and this is visible from within the console. Using the version number we can compare on two different machines that one user is running the latest version whereas someone else may not be.
The code is bundled into two separate files and I feel that this is where we should be looking.
You need to change the file name on each new release.
A hash of the file is an appropriate thing you could add.
Check out md5ify to add this to your project build.
If you implement this yourself, make sure to also load the correct filename in your index.html file.
Edit:
To automatically load the correct file you need to have a placeholder in your main html.
Then you need a manifest.json file that looks like following:
{
"main.js": "main.[HASH].js"
}
This has to be created automatically after the bundling.
Now you can replace the placeholder with correct asset by doing a lookup in the manifest file.
You either have to write your own scripts for this or use something like gulp together with browserify.
Another solution would be webpack

Tern: Synchronizing script resources with tern server

In JBoss Devstudio, I am getting this new "error" with Tern: Synchronizing script resources with tern server. It's not really an error, but it's a process that occurs every single time I click in a JavaScript file. It's just spinning and freezes up the entire IDE. This has never happened to me before, and I was working on the project yesterday without any issues.
Does anyone know what the hell this is? There isn't really anything on Google except one post that says to upgrade.
JBoss Devstudio integrates tern.java for JavaScript support. I think your problem is because that you have a lot of JavaScript files in your project (inside node_modules or bower_components) and tern.java tries to analyze your all JavaScript files, and it takes time.
In your case, you need to exclude folders like node_modules and to do that you must use a version of tern.java >= 1.0.0 which support include/exclusion pattern path.
To deal with this problem, open your workspace and drop the folder, like E:\eclipse\workspace\.metadata\.plugins\tern.eclipse.ide.server.nodejs.embed.win32.win32.x86_64, the node.exe in it is the point.
I resolved this issue by simply eliminating the built in js files from path.
I removed this from validations '**/node_modules/*,**/bower_components/*'. (If it even didn't resolve)Go to Properties of the project > JavaScript > Include Path > Validation
OR
Go to Properties of the project > JavaScript > Include Path > Source and remove the whole project. Click on "Add Folder" and give the required path for your JS. Like projectname/src/pages.

Best practice to maintain minified files and deployment/development

I'm stuck in a bit of dilemma on how to get around this and was hoping someone would point me in the right direction.
I am trying to cut down on the size of css and javascript files to improve our website's performance. But the problem is, on deployment, we simply upload our current svn repository's latest development version onto the server.
I am finding it hard to add that extra step for every developer to minify files before every change, as it adds a risk for negligence and human error.
I was thinking about having the readable version of files on the server anyway, but having some kind of file monitor that will execute a minifier when a file is changed, and update the file used by the website. Has anyone implemented this before?
EDIT
We're currently running on ASP.Net 2.0, Windows Server 2003
If you are using .net on the server, you could also try RequestReduce available on Nuget. It minies and bundles your css and js and also sprites css background images. It does it on the fly so your devs don't have to do this as an extra step. As long as you have some kind of versioning in place that changes the css/js url when it is changed, RequestReduce will automatically detect the change and process the file. It does all of this in the background and there fore does not affect the response time. If the files are not versioned via the url, RequestProduce provides a dashboard where you can flush its cache. RequestReduce can be deployed with absolutely no code changes and hardly any config in most use cases.
If you are using ASP.NET, try MBCompression library - it minify files automatically and you don't need do it manually:

Categories

Resources