Nick Dewitt Nick Dewitt - 23 days ago 7
React JSX Question

ReactJs.NET - ScriptBundling with Server-side component rendering

I have just followed the tutorial here, which was great but the last 2 sections discuss Bundling & Minification, and Server-side rendering, respectively. Unfortunately it doesn't seem to describe how to make these two play nicely, e.g pass a script bundle to the server-side rendering function.

This is what I have so far:

In

BundleConfig.RegisterBundles
I have the following:

bundles.Add(New BabelBundle("~/bundles/main").Include(
"~/Scripts/showdown.js",
"~/Scripts/Tutorial.jsx"))

BundleTable.EnableOptimizations = True


I can render that bundle nice and easily in the view, so if that bundle ends up with a lot of files I only have to update the list in
BundleConfig
.

@Scripts.Render("~/bundles/main")


But in
ReactConfig.Configure
I can't seem to use the bundle, I have to repeat the list of scripts I passed to
BundleConfig
:

//This doesn't work and throws the following error:
//Could not find a part of the path '\\pathToMyProject\bundles\main'
ReactSiteConfiguration.Configuration
.AddScript("~/bundles/main")

//This does, but it's basically a repeat of BundleConfig
ReactSiteConfiguration.Configuration
.AddScript("~/Scripts/showdown.js")
.AddScript("~/Scripts/Tutorial.jsx")


Is there a nice easy way to get it to use the same bundle that it is about to render for the view that is loading?

Answer

You may already have a solution by now, FWIW, here is what you can try, the first 2 steps you may have already carried out, 3rd one is what you are after...

  1. Comment out [assembly: WebActivatorEx.PreApplicationStartMethod(typeof(YourApp), "Configure")] at the top of ReactConfig.cs
  2. In your Application_Start(), after RegisterBundles() you can now insert the call to ReactConfig.Configure(); This makes sure your bundles are actually registered before trying to do anything with them.
  3. Finally in ReactConfig.cs, Add this line

    var myBabelBundlePath = BundleTable.Bundles.ResolveBundleUrl("~/myBabelBundleName"); 
    ReactSiteConfiguration.Configuration.AddScript(myBabelBundlePath);