2017-05-24 1 views
0

J'ai googled beaucoup, et je n'ai pas compris comment le faire. J'ai une application web que je voudrais déployer sur azur. Je génère le lien, mais les routes qui utilisent mes composants React, retournent un code d'état 500.Publier à azure, asp.net core React application

Pour mes composants j'utilise JSX et je les ai dans le dossier wwwroot sous/js (je n'utilise pas ES16).

J'ai besoin de quelque chose pour l'assembler et traiter ce jsx en js droit? Je ne comprends pas pourquoi cela fonctionne sur localhost.

Sur Startup.cs, configurer la méthode, j'ai ajouté les scripts comme ceci:

app.UseReact(config => 
     { 

      config 
       .AddScript("~/js/test.jsx") 
       .AddScript("~/js/users.jsx") 
       .AddScript("~/js/userCards.jsx") 
       .AddScript("~/js/userInfo.jsx") 
       .AddScript("~/js/cards.jsx") 
       .AddScript("~/js/user.jsx") 
       .AddScript("~/js/addCard.jsx") 
       .AddScript("~/js/cardImages.jsx") 

       .SetJsonSerializerSettings(new JsonSerializerSettings 
       { 
        StringEscapeHandling = StringEscapeHandling.EscapeHtml, 
        ContractResolver = new CamelCasePropertyNamesContractResolver() 
       }); 

     }); 

Je suis désolé s'il est une question stupide, mais je ne peux pas sembler trouver une bonne explication pour asp noyau .net.

[EDIT] J'utilise VS2017, asp.net noyau 1.0.4 et 3.0.1 React.AspNet

Les journaux d'erreur:

ReactEngineNotFoundException: No usable JavaScript engine was found. Please 
install a JavaScript engine such as React.JavaScriptEngine.ClearScriptV8 (on 
Windows) or React.JavaScriptEngine.VroomJs (on Linux and Mac OS X). Refer 
    to the ReactJS.NET documentation for more details. 
    React.AspNet.HtmlHelperExtensions.get_Environment() 

    TinyIoCResolutionException: Unable to resolve type: 
    React.JavaScriptEngineFactory 
    React.AspNet.HtmlHelperExtensions.get_Environment() 

    TinyIoCResolutionException: Unable to resolve type: React.ReactEnvironment 
    React.AspNet.HtmlHelperExtensions.get_Environment() 

    ReactNotInitialisedException: ReactJS.NET has not been initialised 
    correctly. Please ensure you have called app.AddReact() and 
    app.UseReact() in your Startup.cs file. 
    React.AspNet.HtmlHelperExtensions.get_Environment() 

Il dit que je n'ai pas l'application .AddReact ni app.UseReact, mais je alors à la fois ...

public void ConfigureServices(IServiceCollection services) 
    { 
     services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); 
     services.AddReact(); 

     services.AddServerSentEvents(); 
     services.AddServerSentEvents<INotificationsServerSentEventsService, NotificationsServerSentEventsService>(); 

     services.AddMvc();    

     services.AddSingleton<HttpClient>(); 
    } 

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, IServiceProvider serviceProvider) 
    { 
     loggerFactory.AddConsole(Configuration.GetSection("Logging")); 
     loggerFactory.AddDebug(); 

     if (env.IsDevelopment()) 
     { 
      app.UseDeveloperExceptionPage(); 
      app.UseBrowserLink(); 
     } 
     else 
     { 
      app.UseDeveloperExceptionPage(); 
      app.UseBrowserLink(); 
     } 


     app.MapServerSentEvents("/see-heartbeat"); 
     app.MapServerSentEvents("/sse-notifications", serviceProvider.GetService<NotificationsServerSentEventsService>()); 

     app.UseStatusCodePagesWithReExecute("/Error/{0}"); 

     app.UseReact(config => 
     { 

      config 
       .AddScript("~/js/test.jsx") 
       .AddScript("~/js/users.jsx") 
       .AddScript("~/js/userCards.jsx") 
       .AddScript("~/js/userInfo.jsx") 
       .AddScript("~/js/cards.jsx") 
       .AddScript("~/js/user.jsx") 
       .AddScript("~/js/addCard.jsx") 
       .AddScript("~/js/cardImages.jsx") 

       .SetJsonSerializerSettings(new JsonSerializerSettings 
       { 
        StringEscapeHandling = StringEscapeHandling.EscapeHtml, 
        ContractResolver = new CamelCasePropertyNamesContractResolver() 
       }); 

     }); 

     app.UseDefaultFiles(); 
     app.UseStaticFiles(); 


     app.UseMvc(routes => 
     { 
      routes.MapRoute(
       name: "default", 
       template: "{controller=Index}/{action=Index}/{id?}"); 
     }); 


    } 
+0

Quels sont les détails de votre erreur? '500' n'est pas assez descriptif pour isoler le problème. – Svek

+0

@Svek j'ai ajouté les journaux d'erreurs à la question – franmcod

Répondre

1

C'est parce que JavaScript Engine que vous avez sur votre PC et non pas dans Azure. Extrait de: https://github.com/reactjs/React.NET/issues/400 (en fait une instruction complète sur la façon d'obtenir React travail)

Je suis en mesure d'obtenir l'application de travail lors de la publication à Azure en utilisant une combinaison de ces guides:

http://www.samulihaverinen.com/web-development/dotnet/2016/01/19/how-to-run-clearscript-v8-javascript-engine-in-azure/

https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/Registration-of-JS-engines

du premier guide, j'ai installé les dépendances séparément:

Uninstall-Package React.AspNet 
Install-Package JavaScriptEngineSwitcher.Core 
Install-Package JavaScriptEngineSwitcher.Msie (May not be needed) 
Install-Package JSPool 
Install-Package JavaScriptEngineSwitcher.ChakraCore 
Install-Package JavaScriptEngineSwitcher.ChakraCore.Native.win-x64 (Selected native implementation) 
Install-Package Microsoft.ChakraCore (I think this is key to enabling ChakraCore on the server) 
Install-Package React.AspNet -IgnoreDependencies 

À partir du deuxième guide, j'ai installé un package pour activer la configuration JavaScriptEngineSwitcher dans 1.x Core .NET:

Install-Package JavaScriptEngineSwitcher.Extensions.MsDependencyInjection 

Dans Startup.cs

ConfigureServices(): 
services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName).AddChakraCore(); 
+0

'Install-Package Microsoft.ChakraCore' c'est une dépendance redondante. Je vous recommande de lire la discussion suivante - https://github.com/reactjs/React.NET/issues/409. –