Converting an HTML/Javascript Project into an Executable - javascript

So I'm working on a just for fun project to get practice using HTML/CSS/Javascript.
I'm using Aptana to write all my code and it is currently set up to run and work in a browser (obviously) it's a text adventure game.
It would be really cool though to be able to compile the code into an executable file that runs in its own window, not in a browser.
Is this something relatively easy to accomplish?
Thanks in advance for any help! :)

FF and Chrome provide a function to run a custom website in an app mode. That means no menubars, no addressbar and a complete window for the website. Maybe this is already what you are looking for.
http://www.rarst.net/software/dedicated-web-app-window/
https://superuser.com/questions/33548/starting-google-chrome-in-application-mode
https://superuser.com/questions/171235/does-internet-explorer-have-something-equivalent-to-chromes-app-mode
But if you are interested in compiled code for speeding up your game, this is not the way to achieve this.

For Windows as OS
see http://www.autoitscript.com/autoit3/docs/libfunctions/_IECreateEmbedded.htm
AutoIt is a scripting language for basically everything (with automation). SciTE is the editor to go.
In the example of the _IECreateEmbedded function, just change:
_IENavigate($oIE, "http://www.autoitscript.com")
to
_IENavigate($oIE, "file://.../thegame.html")
Very simple, you just have to copy-paste it and build it - you can even build it Online: AutoIt Online Compiler

There are many different ways you can acheive this.
If you're only targeting windows machines, then creating a HTA would be the simplest approach.
The modification to the structure of your existing code would be minimal, its essentially changing the file type and adding an extra couple of tags in. If you wanted a single file, instead of an exe and any resources (images etc) that you use you would have to base64 encode your images, and insert external scripts into the main page.
for information about embedding images and icons into a hta: http://www.john-am.com/2010/07/building-a-self-contained-hta-with-embedded-images-and-icons/
You could also use AppJS, node-webkit or similar type projects, but they would add around 30MB of stuff thats not being used.

Related

How do I email a javascript app to someone who doesn't have javascript?

I'm trying to find something that can run my javascript project so that I can send it as a finished project?
I've tried googling for results, which wasn't helpful.
I also found a few youtube videos. They didn't have much of what I wanted.
I have a friend who doesn't have javascript and I want to send him over my finished project. Either as a file or an application, but I'd like it to be sent over so he can see it without the use of javascript and seeing the code.
If they have a browser they have JavaScript. Package up your code as an HTML file that loads the JavaScript.
If this is a Node application then you may need to look at packaging it up differently. Installing Node isn't difficult, and it's available for pretty much anything that can compute.
For a more ambitious packaging you can use something like Electron to make a distributable application. This is a larger investment of time, but it's the easiest for the user to use.

Rendering HTML local file with out browser or networking (lightweight)

I have had a lot of trouble trying to find information or possible examples of this being done.
I would like to render html in a window and take the js from the html and output that to a python code.
The Html is local and there will never be an internet connection for it to run off. Everythin i try shearch for possible answers everyone always seems to relate back to using some small lightweigh browser which in my case isn't an option to use.
Fort some more detail, I am running Selenium-Webdriver
(python) and Iceweasel(Raspberry Pi B+) to get the value of a element from a html page. So using a different browser isnt possible as the lightweight ones are not compatible with selenium. Using Selenium and Iceweasel takes in excess of 2 miunets to fully load up which for what i need it for is far to long.
I had a look into Awesomium but i think it lacks compatability with the Raspberry Pi.
My other thought was to use OpenGL to render the html but found no easy explained examples.
Currently looking into LibRocket, Berkelium and QWebView but again i dont think they will have anythin i need with the compatability i need.
EDIT:
Basically i want a Canvas capeable of rendering HTML to a screen using X11. On the HTML there will be buttons. I want those buttons to preform actions inside a python script.
The way i see it, a browser is basically a toolbar, a canvas and a lot of networking. I want to strip away as much of that as possible and just remain with the canvas.
First go to the directory that you has the local webpage. Than run python -m SimpleHTTPServer 8000. This will "render the html" in a window. Then view source and paste the javascript into a python file. Alternatively if you would like to automate piping the javascript into an out file you can use beautiful soup to select the javascript and write it to any file you want. Then manipulate it in python however you want.

Converting HTML + JavaScript to an exe

There is actually a topic asking a very similar thing, however the information there is either out of date (broken links, discontinued solutions) or not suitable for my needs.
I have a showcase for my graduation wherein we have the opportunity to display our work to potential employers. The interface we have to use only allows .jpg, .flv and .exe files, however my project is in HTML / CSS / JavaScript.
Is there any way I can convert my project into a .exe?
(The ways the pre-existing question's answers suggest creating an .exe are now broken links / discontinued as far as I can tell; and alternate answers suggest ways to create standalone applications which do not generate .exes, which are not fit for my purposes)
Cheers!
Most easiest way is:
1) Download Visual Studio Express Edition(Because it's free).
2) File -> New Project -> Windows Forms Application.
3) Load your current HTML into it.
4) Add WebBrowser control to your project.
5) Deploy your application(Build -> Publish).
Note:
The WebBrowser Control use IE by-default. Take a look at this alternative as well.
Welcome to 2019!
There's all kinds of different ways to accomplish this now. One popular npm package is npm pkg. There's also the popular Electron (this is what vscode was built on), and quite a few others
You Could always turn the HTML file into a HTA file and then convert it into an exe :)
https://www.vbsedit.com/
You can create a Windows app from HTML/JS.
Actually it's one of my pet projects:
Scriptonit
I've been using it for a while to create tools for myself, but just recently I decided to make it a proper freeware product. If you're not looking for something very complex and you don't need lots of frameworks & modules, this might be just what you're looking for.
You can download Scriptonit here.
You may try creating a .exe installer to you html file using Inno Setup.
You can use the setup wizard; just select the html file instead of exe when selecting the main exe file
It works somehow like an installed application, it will open in your browser but you can see in the List of Applications. (in control panel)

compressing .js and .css files on push of the website

I am not even sure if something like I want is possible, so I am asking you guys to just let me know if anyone did that before. So, my goal is to when I click on "Publish" website in VS2010, to have all javascript files compressed into one, same with css and then in my layout file change the references from all different js and css files to only those two merged ones. Is that doable? Or maybe it's doable but in more manual way?
Of course the goal here is to have only two calls to external files on the website, but when I develop I need to see all files so that I can actually work with it. I guess I could do it manually before each push, but I'd rather have it done automatically using some script or something. I didn't try anything yet, and I am not looking for ready solution, I am just looking to get to know the problem better and maybe some tips.
Thanks a lot!
This is built into ASP.net 4.5. But in the mean time, you should look at the following projects
YUI Compressor
The objective of this project is to compress any Javascript and Cascading Style Sheets to an efficient level that works exactly as the original source, before it was minified.
Cassette
Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.
RequestReduce
Super Simple Auto Spriting, Minification and Bundling solution
No need to tell RequestReduce where your resources are
Your CSS and Javascript can be anywhere - even on an external host
RequestReduce finds them at runtime automatically
SquishIt
SquishIt lets you squish some JavaScript and CSS. And also some LESS and CoffeeScript.
Combres
.NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications. Simply put, it helps your applications rank better with YSlow and PageSpeed.
Chirpy
Mashes, minifies, and validates your javascript, stylesheet, and dotless files. Chirpy can also auto-update T4MVC and other T4 templates.
Scott Hanselman wrote a good overview blog post about this topic a while back.
I voted up the answer that mentioned Cassette but I'll detail that particular choice a little more. Cassette is pretty configurable, but under the most common option, it allows you to reference CSS and Javascript resources through syntax like this:
Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first");
Bundles.Reference("Scripts/aFolderOfScripts");
Bundles.Reference("Styles/aFolderOfStyles");
You would then render these in your master or layout pages like this:
#Bundles.RenderStylesheets()
#Bundles.RenderScripts("first")
#Bundles.RenderScripts()
During development, your scripts and styles will be included as individual files, and Cassette will try to help you out by detecting changes and trying to make the browser reload those files. This approach is great for debugging into libraries like knockout when they're doing something you don't expect. And, the best part, when you launch the site, you just change the web.config and Cassette will minify and bundle all your files into as few bundles as possible.
You can find more detail in their documentation (which is pretty good though sometimes lags behind development): http://getcassette.net/documentation/getting-started
Have a look at YUI compressor # codeplex.com this could be really helpful.
What I have done before is setup a post-build event, have it run a simple batch file which minimizes your source files. Then if you're in release mode (not in debug mode), you would reference the minimized source files. http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode
I haven't heard about publish minification. I think use should choose between dynamical minification like SquishIt or compile time like YuiCompressor or AjaxMinifier.
I prefer compile time. I don't think it's very critical to have to compile time changing files. If you have huge css/js code lines you can choose this action only for release compilation and if it helps publish this files only in needed build cinfigurations.
I don't know if there is any possible way to somehow hook into the functionality from that 'Publish' button/whatever it is, but it's surely possible to have that kind of 'static build process'.
Personally I'm using Apache ANT to script exactly what you've described there. So you're developing on your uncompressed js/html/css files and when you're done, you call like ant build which then minifies, compresses, stripes and publishes your whole web application.
Example script: https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml

Break up JavaScript file into more manageable, or using different IDE

I use Dreamweaver for development, mostly PHP, html, css, javascript. Is there anyway to break up JavaScript files? or maybe a better IDE that makes it easier to work with? It just becomes quickly difficult to read and find what I'm looking for.
Thank you!
Intellij and/or Webstorm by Jetbrains has the best JS tools I have found. It has very good (as good as it gets, for JS) intellisense (autocomplete for variables and methods) as well as refactoring for variables and methods. You can cmd+click into method definitions from anywhere, as well. Unfortunately you need to pay for them, but if you are using Dreamweaver you had to pay for that. If you are only doing html/css/javascript Webstorm is the way to go.
Yes, you should break up your javascript files into relevant parts just like you break up your php files into relevant parts. The one key factor here is they should be combined and minified before being served up to the browser so the user does not have to make several network calls to your server for each .js file.
Check out Google Minify for an easy solution to that issue.
Take a look at the JQuery source to see how they divvy up their files. Now look at their combined framework, and of course their minified framework. What is actually served up to the user looks nothing like the source.
Uh, Dreamweaver?
Definitely use a different IDE. Aptana won the poll here :)

Categories