We Keep Coding

Webpack - Inject bundle file to existing html file

Using html-webpack-plugin with web pack,
Can create or generate a index.html file
Can use template to generate a index.html file
But I want to inject the bundled JS and CSS file to another existing html file.
I didn't find any options to do that in the plugin.
We have Asp.net MVC _layout.html.
If I go with the template option, the contents from _layout.html are broken since more code in _Layout.html are html mixed with c#.
Do we have any option to replace content without breaking or add bundled file to existing html file?

Set your html file as template.
template: 'path / to / template / index.html'
Your template extends the basic plugin template.
You can freely modify the template, which is defacto your file e.g. index.html modified by the plugin.

Add JavaScript files in asp.net mvc

I am new in asp.net mvc and I am trying to include .js files in my project but I could not access it on my browser. Like it.
#Scripts.Render("~/bundles/responds.js")
#Scripts.Render("~/bundles/jquery-1.11.3.min.js")
#Scripts.Render("~/bundles/jssor.slider-22.0.15.mini.js")
<script type="text/javascript">
</script>
Anyone can help me, how can I add these files in mvc project? These files exists in Scripts folder.

You can manually add a .js file to a view with the following example code
#model YourNameSpace.ViewModels.YourViewModel
#Scripts.Render("~/Scripts/yourScript.js")
If you want the files to be bundled & you can add them in App_Start/BundleConfig.cs
Example:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle(("~/bundles/customBundle").Include(
"~/Scripts/yourScript.js",
"~/Scripts/anotherScript.js");
}
You can render your script files for the whole application in the ~/Views/Shared/_Layout.cshtml file or any master page by adding the following code
#Scripts.Render("~/bundles/customBundle")
You can inspect the .js file by browsing to the root of your application & add the path of the .js file or bundle (for this example)
http://localhost:9654/bundles/customBundle
http://localhost:9654/Scripts/yourScript.js

I have solved my problem by just drag and drop script files from Scripts folder to at desired place in Index.cshtml and Visual studio auto generate below code.
<script src="~/Scripts/jquery-1.11.3.min.js"></script>
<script src="~/Scripts/jssor.slider-22.1.5.mini.js"></script>
Which includes the script files in asp.net MVC.

You can use C# code to calculate & generate the right file address as follows:
<script type="text/javascript" src='#Url.Content("~/Content/vendor/jquery/jquery.min.js")'></script>
This pattern can use in *.cshtml files.

How can I load my Aurelia app from an index.html which is not located in the same folder as the rest of the application?

How can I load my app from an index.html which is not located in the same folder as the rest of the application?
I’m currently using jspm (which I’m new to). I’m trying to integrate Aurelia with web2py (Python web framework).
My index.html in accessible via
http://websiteaddress.com/myapp/default/index.html
and may later be accessible via
http://websiteaddress.com/myapp/index.html
but the code of my Aurelia app is accessible from
http://websiteaddress.com/myapp/static/aurelia_app/
On the disk the index.html file is at
/web2py/applications/myapp/views/default/index.html
and the Aurelia app folder is at
/web2py/applications/myapp/static/aurelia_app

You need to use the web2py pattern router, something like this in the router definition should work:
routes_in = (
('/appname/default/index', '/appname/static/aurelia_app/index.html'),
('/appname/default/jspm_packages/$anything', '/appname/static/aurelia_app/jspm_packages/$anything'),
)

ASP.NET MVC Bundling Subfolders structure

I want to include javascript files from whole folder and subfolders into a single ASP.NET Bundle. The purpose of this is to load all files from that folder at once.
The idea is to create an angular application and load all app files with a single bundle.
Is this idea ok ?
The problem I have is that the Script tags added to HTML don't respect the subfolder strucutre of my application and the files can't be found.
Bundle config:
bundles.Add(new ScriptBundle("~/bundles/app").IncludeDirectory(
"~/app", "*.js", true));
Folder Structure
app
controller/appMenu.js
modules/navigation.js
app.js
On client side the included tags look like this:
<script src="/app/appMenu.js"></script>
<script src="/app/navigation.js"></script>

I think it might be related to this:
http://aspnetoptimization.codeplex.com/workitem/105
What version of the System.Web.Optimizations assembly are you using?

Generate .war file from web app containing just HTML, CSS & JavaScript

I am trying to create a war file that will be deployed on a web/application server.
The source files of the app are purely HTML, CSS, and JavaScript. There is a separate war file for our REST API and for the rest of our backend code.
Most of the guides out there talk about using java to compile, and pointing to WEB-INF folders etc.
However, as I mentioned, in the HTML/CSS/JS war, I don't use any Java, don't use WEB-INF, and there are no servlets or other things you would normally see in a "Java" war file.
How do I compile or create this type of war file?
The contents look like this:
WebContent/HTML
WebContent/CSS
WebContent/JS
All libraries for JavaScript contained within JS folder.
Would this work: Simply run:
src.dist="./WebContent"
app.name="example"
app.version=1
work.home="./temp"
jar jarfile="${src.dist}/${app.name}-${app.version}.war"
basedir="${work.home}"
Obviously I would have set up the rest of the script correctly.

This is extremely simple:
Create a folder
Add a src/main/webapp folder
Add all of your HTML, CSS and JS files to the src/main/webapp folder
Add an empty web.xml file to the src/main/webapp/WEB-INF directory.
add a maven pom.xml
add the maven-war-plugin to your pom.xml, with the following configuration:
<!-- create the war -->
<plugin>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<webXml>src/main/webapp/WEB-INF/web.xml</webXml>
</configuration>
</plugin>
run mvn clean install!

If you are creating a war file, then you are deploying on a Java based web application server, something like Tomcat or Wildfly.
If you are using eclipse, you can do so by New > Dynamic Web Project (maybe name it foo-bar), click next, next and finish. Then open that foo-bar project and create your css and js folders under WebContent like so.
\WebContent\css
\WebContent\js
\WebContent\index.html
\WebContent\foo-bar.html
You can right click the foo-bar project > Export > Web WAR file.
When you deploy it on say Tomcat, you can test to access your static content like so
http://localhost:8080/foo-bar/css/foo-bar.css
http://localhost:8080/foo-bar/js/foo-bar.js
http://localhost:8080/foo-bar/foo-bar.html
Hope this helps.