Is it possible for the webpack production build assets e.g. app.[chunk].bundle.js, vendor.[chunk].bundle.js of a React single page app to be dynamically added to a default.cshtml file?
I prefer to run some initial server side code before presenting the page to the user and have configured the project use a default.cshtml file that contains all the styles, layouts etc etc.
Right now I’m having to reference the bundles in the development build dist folder.
Any suggestions?
As you’d expect that file is generated by a WebPack build step so the only thing that a C# App is going to see is the physical file that’s generated on the FileSystem, so you’ll need to use .NET File APIs (or VFS VirtualFileSources) to read the FileSystem and look for the generated files that WebPack creates, e.g. files ending with bundle.js.
An alternative (and my preferred) solution is to use ServiceStack Templates instead of Razor as it will allow you to add post processing logic to the same index.html containing all the bundled .js/.css dependencies that’s generated by WebPack.
Thanks, I’ve just taken a look at ServiceStack Templates and it looks like an option.
However it looks drastically different to what I’m used to with Razor and I have very little time to learn somthing new. Is there a guide to migrate from an existing razor project to using Templates?
I’ve tried the first approach but does not seem to pick up the bundled files in wwwroot and only the bundled fiels in the dist folder as show in the pic
I’m using the following code example from the help docs
public override List<IVirtualPathProvider> GetVirtualFileSources()
{
var existingProviders = base.GetVirtualFileSources();
var memFs = new MemoryVirtualFiles();
var fs = existingProviders.First(x => x is FileSystemVirtualFiles);
foreach (var file in fs.GetAllMatchingFiles("*.js").Where(file => file.VirtualPath.EndsWith(".bundle.js")))
{
try
{
var js = file.ReadAllText();
memFs.WriteFile(file.VirtualPath, js);
}
catch (Exception ex)
{
//Report any errors in StartUpErrors collection on ?debug=requestinfo
base.OnStartupException(new Exception(
"Adding Js to Virtual File Error in {0}: {1}".Fmt(file.VirtualPath, ex.Message)));
}
}
//Give new Memory FS highest priority
existingProviders.Insert(0, memFs);
return existingProviders;
}
Why are you adding a new VFS provider? I don’t see the point of the new Memory VFS above as it’s just reading and writing the same file to a new VFS copy which overshadows the FileSystem files?
Don’t you just want to find the file name? In which case search the /dist folder for files ending with .bundle.js, if that’s what you’re trying to do.
We don’t have a migration guide from Razor to Templates other the Chat Web App which shows an example of converting a Razor default.cshtml to a index.html Templates page. But if you don’t have time to read the docs to learn how to use Templates maybe just stick with Razor, another option to avoid Razor is to stick with WebPack’s index.html and use Ajax to call on startup to call a backend service to fetch the data you need and use JavaScript to make the changes you want.