All my scripts are compressed and minified used uglifyJS:
The size of this file "app.min.js" is 982.1KB however when I tried to run the node server and open the app in the browser It's stopped in 502kB
and after some while
I don't know what happened there, Is there any limitation on Javascript file '502kB' ?
what I miss
I think this article may help you, it is all about nodejs server serving static content, so nginx is recommended to do this purpose.
If you have to use nodejs server then you should make all files smaller in terms of size, no need for example to minimize libraries files as jquery since it is already minimized, scripts should be minimized only, you can even minimize all libs files into one javascript file called libs.min.js as example and the rest of your scripts in another file called script.min.js.
Related
I am looking for way to convert single page Angular Application to old style html-css-javascript static files, which runs on my pc without any set-up of complicated node.js or any npm
What I was looking for and came to Angular is, I was heavily looking for Bootstrap-sidebar with lightweight css and js but all the examples I could find had large, big size of Javascript files, so I saw Angular had some novel implementation of Sidebar.
I want to convert the Angular sidebar(Angular application) to old style HTML, css and js files so that I can run them without any complex node server.
Is there any way to get the javascript, css and html out of Angular application. I heard of WebPack but did not tried, so any suggestion would be appreciated.
If the above process can be done in React suggest me a solid way to do that.
Edit: What I want is, I want to access the file as file://path/to/index.html I do not want HTTP (http://localhost/index.html)
Note
When compiling an angular project, the result is already a plain html/css/js website. You do not need nodejs to run angular, but, like for any website, you should use a http server. So your problem is rather that you cannot open an angular website from a file, without a webserver.
Explanation
Your problem is likely that you have errors in the console when opening the resulting index.html from your browser. They come from improved security stadards implemented by browsers (CORS, Strict mime type, access to local files,...). Since you did not provide any error details at all apart from stating that you only have a blank page, here is a basic solution
Solution
Try setting base href to . when building
ng build --prod --base-href=.
The website should work without further action on Firefox.
On chrome, you may get one of the following errors
Access to script at 'file://XXXXXXscripts.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Or
Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec
A possible solution is to remove the type="module" attribute from all script tags at the bottom of index.html if using angular 8+.
There are other options to solve CORS related issues on local files, but it involves disabling security on chrome, which is not a good idea.
It's really simple
You can run npm run build / ng build command.
The build process will transpile all the code into equivalent js code and you can find this transpiled code in "dist" folder of your root project directory.
You can use see there index.html which will be your base html page and other js files or media files which are javascript files.
You can use this content in dist folder to host your website which will be purely html css and js based. You can use nginx or any other server for hosting it.
in Angular you can build your angular application using ng build . This will generate a pure js equivalent of the .ts code you wrote.
Context
I am making an in-browser html/js editor, for this I am using memory-fs (virtual memory) with Webpack and webpack-html-plugin to bundle the files that the user creates in the editor. The files are written to virtual memory in order to avoid I/O operations, which would happen whenever any user compiles their program in the in-browser editor.
Problem
Using node.js, how do I serve the resulting html+js-bundle?
I know I can use
express.get('/:id', (req,res) =>...)
to make dynamic routes which I can map to the correct output. I also know I can use
res.send(html-string-from-virtual-memory)
to serve the html as string. However, I don't know if this will serve also the bundled javascript which will be included in the html file with a script tag like this:
<script type="text/javascript" src="index_bundle.js?a9d6aa105c772d02e0f9"></script>
What will happen when the browser gets to this part? Will it make another request that I will have to handle on the server side with another .get()? What should it look like? I have no idea.
Node.js is made to serve static files from a /public path from disk to handle it easily, so I'm struggling because it doesn't allow me to handle the file-retrieval manually (it just asks for the path and handles the files itself) in order to get the files from the virtual memory.
Yes, when the browser sees the <script> tag, it will make a new request for the JavaScript file. In Node, you can make a new express.get() listener and send the JavaScript just like you send the HTML.
res.send(javascript-string-from-virtual-memory)
I ran into a dilemma lately as I was exploring the various plugins for gulp. One of them was gulp-gzip and till then, I have never thought about compressing my files. I got gulp-gzip to work correctly and spit out gzipped versions of my HTML, CSS and JS files but then, what next?
I googled around and found that most articles talk about configuring the server to send gzipped versions of the content automatically to the client upon request. But then, I kind of don't seem to understand the purpose of gzipping locally.
So, my questions are:
Can I serve gzipped content I get from gulp-gzip without configuring my server?
If yes, how should I proceed -- what should I name my gzipped files as? Should I keep the .gz extension and link to my CSS and JS files using the same?
If yes, can I test it locally by linking to the same .gz files?
If no, what is the purpose of gulp-gzip in a development environment if the server can be configured to do it automatically?
Most servers have an option to serve statically pre-compressed files if a *.gz version exists, i.e. when user requests foo.css, the server will check if foo.css.gz exists and use it.
It requires server support (the server has to set appropriate HTTP headers), so it won't work with the file:// protocol and may not work on every server.
In URLs you have to refer to the base filename (do not link to .gz directly).
Compressing files ahead of time may be better:
You can use higher compression level (e.g. maximum gzip level or the Zopfli compressor), which would be too slow to do real-time on the server.
Compressing ahead of time saves CPU time of the server, because it doesn't have to dynamically compress files when they're requested.
Just be careful when you deploy files to the server to update both *.css and *.css.gz at the same time, otherwise you may be surprised that you sometimes see old version of the file.
I have a huge set of JavaScript files that need to be added to the App cache. Is it possible to add an entire folder(JS folder) in the Manifest. Else, I'll have to manually add those JS files to the manifest.
Your manifest file doesn't need to be a static file. Just write some server side code to generate a manifest based on the files in the folder.
As Maurice has pointed out, you can generate the file dynamically.
Or better still, have a background task do the work when the contents of the folder changes.
Node.js is good for this if you are already familiar with JS and have control over the server so that it can be installed. Node comes with capabilities for watching files and folders & there are a number of libraries available to make the job simple.
One key issue to watch out for though is the combined size of the files. Many browsers that support HTML5 offline use, put strict limits on the amount of data you can store offline. Typically the default limit is 5MB.
I want to upload a bunch of image files to a directory that I've set up on my ISP's free hosting service. It's something like http://home.ISPname.net/~username/subdir.
I want my Javascript code to be able to get a directory listing and then preload whatever it finds.
But getting such a thing even possible? My impression is not.
I suspect I will have to instead rename my files to 00000.jpg and upward, and attempt to detect what files are there using try.
FYI, I know that my ISP does not support using FTP protocol to get a directory listing.
Thanks for any help.
Under the assumption that your JavaScript code is code on your pages and not code on your server, then no, there's no API provided for JavaScript in a web browser other than a server-side API accessible via HTTP that you would create yourself. If the directory full of files is on the server, then it's going to have to be some server-side code that delivers the directory listing anyway. You could write such code in the server-side programming environment of your choice (including a server-side JavaScript solution, if that's what you want and if such a thing is possible at your ISP). As Pekka notes, it may be possible to simply enable directory browsing in your server, though that's generally a fairly low-level service that will deliver some sort of HTML page to you, and parsing through that might be somewhat painful (compared to what you could get from a tailor-made service).
Another, simpler thing you could do would be to upload a manifest file along with the other image files. In other words, create the directory listing in some easy-to-digest form, and maintain it separately as a simple file to be fetched.
javascript not suport directory listing in a direct way. but you can create a directory dumper php file, and send via AJAX.