Develop Reference

Web Project Structure - Can I nest server file in HTML file?

I'm fairly new to web development, but I've take a couple hands-on introductory courses where the basic structure of a website is you have an HTML file (or several ejs template files), a CSS file, and then you have something called a "server" file which is a JavaScript file, typically called app.js
I know that if I wanted to, I could include all my CSS inside the HTML file in <style> tags. My question is, should I have the need to do so, would it be possible for me to include the server code in <script> tags within a single HTML file?
Debating on whether or not I should put forth the effort to attempt to do so, but if it's generally problematic (note: I don't car about "best practice") for some reason such as it prevents you from working with certain packages/modules like EJS or Node.js then I will likely conclude that it doesn't make sense to try. As a novice web developer, I fear I am not aware of certain restrictions that I would likely run into if any (besides lack of module support).

would it be possible for me to include the server code in <script> tags within a single HTML file?
No.
Web browsers, which execute the scripts in webpages, do not provide JavaScript programs with the APIs required to run a server.
If you want to write a web server in JavaScript then you'll need to run it using a tool like Node.js and not a web browser.

No, you cannot put server-side code in HTML or in JS files that are sent to the client. Server-side code is code that is run on a server that you host, while client-side code is code that is run on the computer of the person who is visiting your webpage.
You can put client-side code in HTML <script> tags., and you can also include client-side code in separate JS files. The drawbacks are immense though, as:
Code highlighters won't be able to highlight your code and point out things like syntax errors as easily.
You won't be able to use tools like Babel and TypeScript, which input and output JS files.
You can't use NPM modules without a bundler like Webpack, which itself will output JS files.
Overall, there isn't really a good reason to use the <script> tag. It takes 2 extra seconds to just create another file for your JS, and it's more organized, more modularized and easier to use with external tools.

What are those cache.js and compilation-mappings files

Recently I received a package with web page. I see inside (beside normal html and js files) there are some JS files. It looks like this:
4A3674A3247236B3C8294D2378462378.cache.js
FE728493278423748230C48234782347.cache.js
compilation-mappings.txt
Inside .js files I see Javascript which is obfuscated or minified. Inside compilation-mappings.txt the cache.js are referenced. Are these files generated by some kind of WEB IDE? Unfortunately I have no chance to get information how this wep page was developed.

That is a web project coded in Java and compiled to JS using the GWT project tools.
GWT compiler does a lot of the work you would have to do manually when coding JS by hand, and some other tasks which are almost impossible in a normal JS project: obfuscate, compress, death-code removal, different optimization per browser, renaming of the scripts, code splitting, etc.
What you have in your app is the result of this compilation:
First you should have a unique index.html file, because GWT is used to produce RIA (Rich Internet Applications) also known as SPI (Single Page Interface).
The unique html file should have a reference to a javascript file named application_name.nocache.js. Note the .nocache. part, meaning that the web server should set the appropriate headers, so as it is not cached by proxies nor browsers. This file is very small becaust it just have the code to identify the browser and ask for the next javascript file.
This first script knows which NNNN.cache.js have to load each browser. The NNNN prefix is a unique number which is generated when the app is compiled, and it is different for each browser. GWT supports 6 different browser platforms, so normally you would have 6 files like this. Note the .cache. part of the name, meaning that this files could be cached for ever. They are large files because have all the code of your application.
So the normal workflow of your app is that the browser ask for the index.html file which can be cached. This file has the script tag to get the small start script applicaton.nocache.js which should be always requested to the server. It has just the code for loading the most recent permutation for your browser NNNN.cache.js which will be downloaded cached in your browser for ever.
You have more info about this stuff here
The goals of this naming convention is that the next time the user goes to the app, it will be in cache the index.html and NNNN.cache.js files, asking only for the application.nocache.js which is really small. It guarantees that the user loads always the most recent version of the app, that the browser will download just once the code of your app, that proxies or cache devices do not break your app when releasing a new version, etc.
Said that, it is almost impossible to figure out what the code does inspecting the javascript stuff because of the big obfuscation. You need the original .java files to understand the code or make modifications.

I can't say for sure, but often a string will be attached to the name of a javascript file so that when a new version is deployed clients will not use a cached version of the old one.
(ie, if you have myScript.js and change it, the browser will say "I already have myScript.js, Idon't need it. If it goes from being myScript1234.js to myScript1235.js the browser will go fetch it)
It is possible the framework in use generated those files as part of it's scheme to handle client side cache issues. Though without knowing more details of what framework they used, there's no way of knowing for sure.

Compiling .hta file to .exe

I have searched far and wide for a way to compile my .hta file (and resources) to a .exe file.
There are plenty of applications that claim to be able to do this - but they have not worked for this application - which is a mixture of javascript and VB.
Simply, (and naively,) I don't want people looking at / screwing with the code. Any suggestions or solutions would be greatly appreciated.
EDIT: Of course, I understand that javascript and VB are not "compilable" since they are interpreted languages. I am just looking for a way to truly hide the source.

HTAEdit, which comes bundled with VBSedit, does not truly hide the hta code. At run time, it extracts the original hta file to a subdirectory in %temp% and passes it off to mshta.exe to execute. The converted exe's created by VBSedit don't seem to do this as far as I can tell.

Try using VBSedit, it definitely works for converting both vbs and hta to exe

You can "compile to exe" by simply wrapping the HTA into an executable which knows how to setup the HTA context/window.
The most trivial approach (which sounds like ExeScript) is to simply extract the HTA/resources first and then execute them. One could theoretically do this without temporary files by injecting data into a running IE context, but the task becomes more difficult. The internal JS may or may not be obfuscated and the wrapper may or may not add an additional layer of obfuscation/"encryption". (PayMo, and I am sure there are others, uses a wrapped context approach to distribute a single runnable exe).
If protecting "intellectual property" is the goal, hire a good lawyer :-)

I'm not sure about compiling to an exe - but if you minify & obfuscate your source code, unless you've got something incredibly valuable, it'd be a huge job to reverse-engineer.
http://developer.yahoo.com/yui/compressor/
Good luck.

You don't need a compiler, you need an encryptor/decryptor, like my project (under construction), the CFS project (Cryptographica File Security).

My clue is to create VBScript or JScript file for HTA to be dynamically spawned by. So you compile not HTA, but the script. This approach meets your security requirements much better than HTA packed to SFX.
Prepare the resources first - import to HTA all external files: scripts, stylesheets, and images (base64-encoded), to make your HTA standalone app. Then create eg VBScript file, and copy all HTML content from your HTA to the string variable in the script, replacing new line and tab symbols to " & vbCrLf & " and " & vbTab & ". Add code to create HTA window dynamically, .write() that string variable to the window's document, and quit script.
Note that Window_OnLoad() may not work properly due to pushing the content to window, that was already loaded.
Then just encrypt your completed VBScript to exe (using true encrypting utility, eg Primal Script 2012, ExeScript, VbsEdit or ScriptCryptor). And change icon with PE Explorer.
All that will take some time, but it is worth doing.
UPD: Here is an example of prepared script by the link.

Inline CSS/Javascript into a HTML file

I am looking for a simple commandline script/program to automatically "inline" all external css and javascript references for a html file. I basically want to create a single self-contained html file suitable for sending via E-Mail. An additional bonus would be if it could also inline images as data: UIRs, but that part is not so important.

EDIT : I wrote a little Python script for fun. It seems to work pretty well :
Inline2Mail
Or you can still try with :
Front compiler does something like that but it implies javascript. You have an online solution as well, with premailer. Finally you have a Python and a Ruby script to do it.

There is a Node.js library which solves exactly your problem: https://github.com/remy/inliner/ It can be used both as a commandline script and a library.
It will make you a single .html file which can be sent anywhere by any means and be opened later in any browser without the need in Internet connection.
If you think about inlining CSS and Javascript to make a HTML body of an email, just forget about it. Most Email clients out there will either ignore or badly damage your styles and I think all email clients will just plainly drop the inline Javascript in the body of emails.

This Python project of mine can help with getting the CSS styles inline https://github.com/rennat/pynliner

If it's not something that needs to be automated and you're using Windows you could open the web page in Internet Explorer and save it as 'Web Archive, single file (*.mht)'. This will pack everything into a single file, including CSS, JavaScript and images. Note that the recipients needs to have access to Internet Explorer to be able to open the Web Archive. Neither Google Chrome nor Firefox supports mht files, so it's probably a Microsoft only feature.

How to work with JavaScript in development then live

I work on front end development and am looking to find a solution for working with javaScript between (non compressed and multiple files) development environment and (compressed and combined files) live environment.
I have found a solution with CSS which means that I only need to include one global CSS file with imports, then we combine and compress those imports when deploying to a live environment. This means that we don't have to toggle adding references in to the head for dev and live.
Any ideas on a similar solution for JavaScipt?
Thanks
Dave

If you are using jQuery it's really easy to include external Javascript files from within Javascript which is basically what you described you did with CSS.
Read up on jQuery getScript()

You can use Charles Web debugging proxy. Or smth similar.
Charles allows to give any local file instead of any url. So you can give your browser your local JS file instead of live JS. Thus you will be able to test JS or CSS changes without showing them to your users.

I use ESC to merge and compress all the independant JavaScripts to a central one, and have it run as a 'post build' task.

For Visual Studio I wrote a small console application I wrote (like ESC as someone mentioned) that is used as a post-build event. It's simple but automates the job you're describing by:
Taking a list of filenames as its arguments
Compressing each one using Crockford's JS compressor
Combining the output into one .js file
Then in the site project, the file is loaded from a resource, and a toggle is performed in a class
List<string> files = new List<string>();
#if DEBUG
files.Add("MyNamespace.Javascript.script1.js");
files.Add("MyNamespace.Javascript.script2.js");
#else
files.Add("MyNamespace.Javascript.Live.js"); // single file
#endif
// ScriptManager.Register them
You could also enable GZIP compression on the JS files for even faster load times. If you're not using the Microsoft dev environment then I'll delete this.

Thanks for all your responses. I have come up with a solution which uses some of your ideas.
i have a global js file which has a list of files to include and when run during dev just writes the script links to the page.
Then included in the deployment process is a script which parses the global js file, looks up which files it is linking together, combines and compresses them in to one global js file.
This means that I don't need any server side code during the process which makes things easier to maintain across a team of freelance front end devs.
i'll post the final bunch of code when it's ready on my blog.

I don't know how your dev environment looks like but you could put all the script tags into one file for development and have another for production that has the script tag for your one single file. For example: development_js.extension and production_js.extension.
Then it's just a matter of either using server-side include or some build tool to merge the correct file into your HTML file.