Skip to content

Commit c7c0058

Browse files
dustinsoftwaredustinsoftware
authored
Add ChakraCore documentation (#547)
* Add ChakraCore documentation * Update sample projects to run on OS X and Linux * Add ChakraCore link from readme * Update quick start in readme * Use MsDependencyInjection package
1 parent 9a7fc2d commit c7c0058

File tree

9 files changed

+118
-71
lines changed

9 files changed

+118
-71
lines changed

‎README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,27 @@ Features
1818
* [MSBuild](http://reactjs.net/guides/msbuild.html)
1919
* [Server-side component rendering](http://reactjs.net/guides/server-side-rendering.html)
2020
to make your initial render super-fast (experimental!)
21-
* [Runs on Linux](http://reactjs.net/guides/mono.html) via Mono and V8
22-
* Supports both ASP.NET 4.0/4.5 and ASP.NET Core 1.0
21+
* [Runs on Windows, OS X and Linux](http://reactjs.net/guides/chakracore.html) via .NET Core and ChakraCore
22+
* Supports both ASP.NET 4.0/4.5 and ASP.NET Core
2323

2424
Quick Start
2525
===========
2626
Install the package
2727
```
2828
Install-Package React.Web.Mvc4 # For ASP.NET MVC 4 or 5
29-
Install-Package React.AspNet   # For ASP.NET Core MVC 1.0
29+
Install-Package React.AspNet   # For ASP.NET Core MVC
3030
```
3131

3232
Create JSX files
3333
```javascript
3434
// /Scripts/HelloWorld.jsx
35-
var HelloWorld = React.createClass({
36-
render: function () {
35+
class HelloWorld extends React.Component {
36+
render() {
3737
return (
3838
<div>Hello {this.props.name}</div>
3939
);
4040
}
41-
});
41+
};
4242
```
4343

4444
Reference the JSX files from your HTML

‎site/jekyll/getting-started/aspnetcore.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,3 +67,5 @@ Finally, add this to `Views\_ViewImports.cshtml` (or create it if it doesn't exi
6767
```
6868

6969
Once ReactJS.NET has been configured, you will be able to use [on-the-fly JSX to JavaScript compilation](/getting-started/usage.html) and [server-side rendering](/guides/server-side-rendering.html).
70+
71+
If you need support for non-Windows platforms, please see the [ChakraCore guide](/guides/chakracore.html).

‎site/jekyll/guides/chakracore.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
layout: docs
3+
title: OS X/Linux (.NET Core and ChakraCore)
4+
---
5+
6+
ReactJS.NET supports running on non-Windows platforms via both Mono and .NET Core. This guide focuses on OS X / Linux support via the ChakraCore engine and .NET Core, which uses precompiled binaries. To use the full .NET framework with Mono, please see the [Mono guide](/guides/mono.html).
7+
8+
Add `React.AspNet` as a dependency to your .NET Core project. Check out the [sample project](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.CoreMvc) or the [documentation](https://reactjs.net/getting-started/aspnetcore.html) if you need more details on that.
9+
10+
Next, install the `JavascriptEngineSwitcher.ChakraCore` and `JavaScriptEngineSwitcher.Extensions.MsDependencyInjection` NuGet packages. Depending on the platform(s) you want to support, also install one or more of these NuGet packages:
11+
12+
- Windows: `JavaScriptEngineSwitcher.ChakraCore.Native.win-x64`. The VC++ 2017 runtime is also required.
13+
- OS X: ``JavaScriptEngineSwitcher.ChakraCore.Native.osx-x64`
14+
- Linux x64: ``JavaScriptEngineSwitcher.ChakraCore.Native.linux-x64`
15+
16+
In `Startup.cs`, set ChakraCore as the default Javascript engine.
17+
18+
```csharp
19+
using JavaScriptEngineSwitcher.ChakraCore;
20+
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
21+
22+
public void ConfigureServices(IServiceCollection services)
23+
{
24+
services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName)
25+
.AddChakraCore();
26+
27+
// existing services below:
28+
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
29+
services.AddReact();
30+
services.AddMvc();
31+
}
32+
```
33+
34+
You're done! Server-side rendering and JSX compilation should now be working properly.
35+
36+
For more information about registering Javascript engines, check out the [JavascriptEngineSwitcher documentation](https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/Registration-of-JS-engines).

‎src/React.Sample.CoreMvc/React.Sample.CoreMvc.csproj‎

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,41 @@
11
<Project Sdk="Microsoft.NET.Sdk.Web">
2-
32
<PropertyGroup>
4-
<TargetFrameworks>net461;netcoreapp2.0</TargetFrameworks>
3+
<TargetFramework>netcoreapp2.0</TargetFramework>
54
<PreserveCompilationContext>true</PreserveCompilationContext>
65
<AssemblyName>React.Sample.CoreMvc</AssemblyName>
76
<OutputType>Exe</OutputType>
87
<PackageId>React.Sample.CoreMvc</PackageId>
98
<NoWarn>1701</NoWarn>
10-
<RuntimeFrameworkVersion Condition=" '$(TargetFramework)' == 'netcoreapp2.0' ">2.0</RuntimeFrameworkVersion>
9+
<RuntimeFrameworkVersion>2.0</RuntimeFrameworkVersion>
1110
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
1211
</PropertyGroup>
13-
1412
<ItemGroup>
1513
<None Include="App.config" />
1614
<None Update="wwwroot\**\*;Views\**\*">
1715
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
1816
</None>
1917
</ItemGroup>
20-
2118
<ItemGroup>
2219
<ProjectReference Include="..\React.Core\React.Core.csproj" />
2320
<ProjectReference Include="..\React.AspNet\React.AspNet.csproj" />
2421
</ItemGroup>
25-
2622
<ItemGroup>
23+
<PackageReference Include="JavascriptEngineSwitcher.Chakracore" Version="2.4.18" />
24+
<PackageReference Include="JavascriptEngineSwitcher.Extensions.MsDependencyInjection" Version="2.4.0" />
25+
<PackageReference Include="JavascriptEngineSwitcher.Chakracore.native.linux-x64" Version="2.4.17" />
26+
<PackageReference Include="JavascriptEngineSwitcher.Chakracore.native.osx-x64" Version="2.4.17" />
27+
<PackageReference Include="JavascriptEngineSwitcher.Chakracore.native.win-x64" Version="2.4.17" />
2728
<PackageReference Include="Microsoft.AspNetCore" Version="2.0.0" />
2829
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.0.0" />
2930
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.ViewCompilation" Version="2.0.0" PrivateAssets="All" />
3031
<PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="2.0.0" />
3132
<PackageReference Include="Microsoft.VisualStudio.Web.BrowserLink" Version="2.0.0" />
3233
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.0" PrivateAssets="All" />
3334
</ItemGroup>
34-
35-
<ItemGroup Condition=" '$(TargetFramework)' == 'net461' ">
36-
<PackageReference Include="JavaScriptEngineSwitcher.V8" Version="2.4.2" />
37-
<Reference Include="System" />
38-
<Reference Include="Microsoft.CSharp" />
39-
</ItemGroup>
40-
41-
<ItemGroup Condition=" '$(TargetFramework)' == 'netcoreapp2.0' ">
42-
<PackageReference Include="VroomJs" Version="1.2.3" />
43-
</ItemGroup>
44-
4535
<Target Name="PrepublishScript" BeforeTargets="PrepareForPublish" Condition=" '$(IsCrossTargetingBuild)' != 'true' ">
4636
<Exec Command="npm install" />
4737
<Exec Command="bower install" />
4838
<Exec Command="gulp clean" />
4939
<Exec Command="gulp min" />
5040
</Target>
51-
5241
</Project>

‎src/React.Sample.CoreMvc/Startup.cs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
*/
99

1010
using System;
11+
using JavaScriptEngineSwitcher.ChakraCore;
12+
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
1113
using Microsoft.AspNetCore.Builder;
1214
using Microsoft.AspNetCore.Hosting;
1315
using Microsoft.AspNetCore.Http;
@@ -37,6 +39,9 @@ public IServiceProvider ConfigureServices(IServiceCollection services)
3739
// Add MVC services to the services container.
3840
services.AddMvc();
3941

42+
services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName)
43+
.AddChakraCore();
44+
4045
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
4146

4247
// Add ReactJS.NET services.

‎src/React.Sample.Router.CoreMvc/React.Sample.Router.CoreMvc.csproj‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
<Folder Include="wwwroot\" />
77
</ItemGroup>
88
<ItemGroup>
9+
<PackageReference Include="JavascriptEngineSwitcher.ChakraCore" Version="2.4.18" />
10+
<PackageReference Include="JavascriptEngineSwitcher.ChakraCore.native.linux-x64" Version="2.4.17" />
11+
<PackageReference Include="JavascriptEngineSwitcher.ChakraCore.native.osx-x64" Version="2.4.17" />
12+
<PackageReference Include="JavascriptEngineSwitcher.ChakraCore.native.win-x64" Version="2.4.17" />
13+
<PackageReference Include="JavascriptEngineSwitcher.Extensions.MsDependencyInjection" Version="2.4.0" />
914
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.0" />
1015
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.0" />
1116
</ItemGroup>

‎src/React.Sample.Router.CoreMvc/Startup.cs‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
using System;
2-
using JavaScriptEngineSwitcher.Core;
3-
using JavaScriptEngineSwitcher.Msie;
2+
using JavaScriptEngineSwitcher.ChakraCore;
3+
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
44
using Microsoft.AspNetCore.Builder;
55
using Microsoft.AspNetCore.Hosting;
66
using Microsoft.AspNetCore.Http;
@@ -23,6 +23,10 @@ public Startup(IConfiguration configuration)
2323
public IServiceProvider ConfigureServices(IServiceCollection services)
2424
{
2525
services.AddMvc();
26+
27+
services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName)
28+
.AddChakraCore();
29+
2630
services.AddReact();
2731
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
2832

‎tutorial-code/Startup.cs‎

Lines changed: 45 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
using System.Collections.Generic;
33
using System.Linq;
44
using System.Threading.Tasks;
5+
using JavaScriptEngineSwitcher.ChakraCore;
6+
using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection;
57
using Microsoft.AspNetCore.Builder;
68
using Microsoft.AspNetCore.Hosting;
79
using Microsoft.AspNetCore.Http;
@@ -14,44 +16,47 @@
1416

1517
namespace ReactDemo
1618
{
17-
public class Startup
18-
{
19-
public Startup(IHostingEnvironment env)
20-
{
21-
var builder = new ConfigurationBuilder()
22-
.SetBasePath(env.ContentRootPath)
23-
.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
24-
.AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
25-
.AddEnvironmentVariables();
26-
Configuration = builder.Build();
27-
}
19+
public class Startup
20+
{
21+
public Startup(IHostingEnvironment env)
22+
{
23+
var builder = new ConfigurationBuilder()
24+
.SetBasePath(env.ContentRootPath)
25+
.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
26+
.AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
27+
.AddEnvironmentVariables();
28+
Configuration = builder.Build();
29+
}
2830

29-
public IConfigurationRoot Configuration { get; }
31+
public IConfigurationRoot Configuration { get; }
32+
33+
// This method gets called by the runtime. Use this method to add services to the container.
34+
public void ConfigureServices(IServiceCollection services)
35+
{
36+
services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName)
37+
.AddChakraCore();
3038

31-
// This method gets called by the runtime. Use this method to add services to the container.
32-
public void ConfigureServices(IServiceCollection services)
33-
{
3439
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
3540
services.AddReact();
36-
// Add framework services.
37-
services.AddMvc();
38-
}
41+
// Add framework services.
42+
services.AddMvc();
43+
}
3944

40-
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
41-
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
42-
{
43-
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
44-
loggerFactory.AddDebug();
45+
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
46+
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
47+
{
48+
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
49+
loggerFactory.AddDebug();
4550

46-
if (env.IsDevelopment())
47-
{
48-
app.UseDeveloperExceptionPage();
49-
app.UseBrowserLink();
50-
}
51-
else
52-
{
53-
app.UseExceptionHandler("/Home/Error");
54-
}
51+
if (env.IsDevelopment())
52+
{
53+
app.UseDeveloperExceptionPage();
54+
app.UseBrowserLink();
55+
}
56+
else
57+
{
58+
app.UseExceptionHandler("/Home/Error");
59+
}
5560

5661
// Initialise ReactJS.NET. Must be before static files.
5762
app.UseReact(config =>
@@ -80,12 +85,12 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerF
8085

8186
app.UseStaticFiles();
8287

83-
app.UseMvc(routes =>
84-
{
85-
routes.MapRoute(
86-
name: "default",
87-
template: "{controller=Home}/{action=Index}/{id?}");
88-
});
89-
}
90-
}
88+
app.UseMvc(routes =>
89+
{
90+
routes.MapRoute(
91+
name: "default",
92+
template: "{controller=Home}/{action=Index}/{id?}");
93+
});
94+
}
95+
}
9196
}

‎tutorial-code/tutorial-code.csproj‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
<Project Sdk="Microsoft.NET.Sdk.Web">
2-
32
<PropertyGroup>
43
<TargetFramework>netcoreapp2.0</TargetFramework>
54
<PreserveCompilationContext>true</PreserveCompilationContext>
65
<AssemblyName>tutorial-code</AssemblyName>
76
<OutputType>Exe</OutputType>
87
<PackageId>tutorial-code</PackageId>
98
</PropertyGroup>
10-
119
<ItemGroup>
1210
<None Include="App.config" />
1311
<None Update="wwwroot\**\*;Views\**\*;Areas\**\Views">
1412
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
1513
</None>
1614
</ItemGroup>
17-
1815
<ItemGroup>
16+
<PackageReference Include="JavascriptEngineSwitcher.ChakraCore" Version="2.4.18" />
17+
<PackageReference Include="JavascriptEngineSwitcher.ChakraCore.native.linux-x64" Version="2.4.17" />
18+
<PackageReference Include="JavascriptEngineSwitcher.ChakraCore.native.osx-x64" Version="2.4.17" />
19+
<PackageReference Include="JavascriptEngineSwitcher.ChakraCore.native.win-x64" Version="2.4.17" />
20+
<PackageReference Include="JavascriptEngineSwitcher.Extensions.MsDependencyInjection" Version="2.4.0" />
1921
<PackageReference Include="Microsoft.AspNetCore" Version="2.0.0" />
2022
<PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.0.0" />
2123
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.ViewCompilation" Version="2.0.0" PrivateAssets="All" />
@@ -24,5 +26,4 @@
2426
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.0.0" PrivateAssets="All" />
2527
<PackageReference Include="React.AspNet" Version="3.2.0" />
2628
</ItemGroup>
27-
28-
</Project>
29+
</Project>

0 commit comments

Comments
 (0)