An ASP.NET MVC (MVC Core 1, MVC 6) ViewEngine for rendering markup in a javascript environment. Ideal for React and Angular server-side rendering.
The main drive behind this is to support isomorphic/universal rendering. The idea is that your Model will be passed to a javascript method that will render markup in return. Imagine having a react component tree that is hydrated via a single immutable JSON structure, representing the initial state of the service-side rendered page.
There were existing projects out there that allowed us to render javascript. All of them had their issues.
- NodeServices - https://github.com/aspnet/NodeServices
- pros
- Supports ASP.NET 5 (ASP.NET Core 1)
- .NET Core (Windows/Linux/Mac)
- cons
- Too much .NET integration than what is needed
- Razor is required
- pros
- React.NET - https://github.com/reactjs/React.NET
- pros
- Embedded javascript engine
- Fast
- cons
- Narrow focus (only React, not Angular)
- Limited support for libraries
- Opinionated
- No .NET Core support.
- pros
TO BE DONE
-
FixDone.dnxcore50support in the VroomJs dependency. It has many peices that need to be#ifdef'd or updated to use the newer .NET API. -
Support older versions of MVC. The older versions aren't really conducive to gulpy environments, but it is nice to have the support there in case anybody needs it.MvcCore1 and Mvc6 supported. -
Create boilerplate for getting started with ReactDone, react-aspnet-boilerplate) - Create boilerplate for getting started with Angular.
Checkout the JavaScriptViewEngine.Samples repo!
Getting started is pretty simple.
- Add a reference to the
JavaScriptViewEngineNuGet package. - Setup things app in your
Startup.cs.
public class Startup
{
private readonly IHostingEnvironment _env;
public Startup(IHostingEnvironment env)
{
_env = env;
}
public void ConfigureServices(IServiceCollection services)
{
services.AddJsEngine();
services.Configure<RenderPoolOptions>(options =>
{
options.WatchPath = _env.WebRootPath;
options.WatchFiles = new List<string>
{
Path.Combine(options.WatchPath, "default.js")
};
});
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app)
{
app.UseJsEngine(); // this needs to be before MVC
app.UseMvc(routes =>
{
routes.MapRoute("default", "{controller=Home}/{action=Index}/{id?}");
});
}
}- Create
default.jsin yourWebRootPaththat will be invoked when rendering.
module.exports = {
renderView: function (callback, path, model, viewBag, routeValues) {
callback(null, {
html: "<html><head></head><body><p><strong>Model:</strong> " + JSON.stringify(model) + "</p><p><strong>ViewBag:</strong> " + JSON.stringify(viewBag) + "</p></body>",
status: 200,
redirect: null
});
},
renderPartialView: function (callback, path, model, viewBag, routeValues) {
callback(null, {
html: "<p><strong>Model:</strong> " + JSON.stringify(model) + "</p><p><strong>ViewBag:</strong> " + JSON.stringify(viewBag) + "</p>"
});
}
};- Get rolling in MVC.
public class HomeController : Controller
{
public IActionResult Index(string greeting = "Hello word!")
{
return View(new GreetingViewModel { Greeting = greeting });
}
}
public class GreetingViewModel
{
public string Greeting { get; set; }
}This project uses Cake for building: http://cakebuild.net/
From a Powershell prompt:
PS> ./build.ps1