Вам нужно включить Javascript — приложение React

#javascript #asp.net #reactjs #iis #.net-core

#javascript #asp.net #reactjs #iis #.net-core

Вопрос:

У меня есть ASP.Net Основное веб-приложение с React, которое я создал в Visual Studio 2019. Сейчас я пытаюсь развернуть на Windows Server 2019 стандартный IIS.

Я выполнил все шаги, чтобы развернуть это, и теперь при просмотре сайта на веб-странице отображается просто белый экран. При проверке страницы я вижу You need to enable JavaScript to run this app.

Читая другие сообщения, я вижу, что проблема может быть связана с моим package.json, startup.cs или web.config. Я опубликовал свой код для всех трех. Нужно ли мне запускать npm build на сервере?

Или, может быть, что-то с моими портами?

package.json

 {
  "name": "testcalendar",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "axios": "^0.21.0",
    "bootstrap": "^4.5.3",
    "jquery": "^3.4.1",
    "material-table": "^1.69.1",
    "merge": "^1.2.1",
    "oidc-client": "^1.9.0",
    "react": "^16.0.0",
    "react-bootstrap": "^1.4.0",
    "react-datepicker": "^3.3.0",
    "react-dom": "^16.0.0",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.1",
    "reactstrap": "^8.4.1",
    "rimraf": "^2.6.2",
    "xml-js": "^1.6.11"
  },
  "devDependencies": {
    "ajv": "^6.9.1",
    "cross-env": "^5.2.0",
    "typescript": "^3.7.5",
    "eslint": "^6.8.0",
    "eslint-config-react-app": "^5.2.0",
    "eslint-plugin-flowtype": "^4.6.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.18.3",
    "nan": "^2.14.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "scripts": {
    "start": "rimraf ./build amp;amp; react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "lint": "eslint ./src/"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
  

startup.cs

 using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace TestCalendar
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {

            services.AddControllersWithViews();

            // In production, the React files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/build";
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            //app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseSpaStaticFiles();

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.SourcePath = "ClientApp";

                if (env.IsDevelopment())
                {
                    spa.UseReactDevelopmentServer(npmScript: "start");
                }
            });
        }
    }
}
  

web.config

 <?xml version="1.0" encoding="utf-8"?>
<configuration>
    <location path="." inheritInChildApplications="false">
        <system.webServer>
            <handlers>
                <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
            </handlers>
            <rewrite>
                <rules>
                    <rule name="React Routes" stopProcessing="true">
                        <match url=".*" />
                        <conditions logicalGrouping="MatchAll">
                            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        </conditions>
                        <action type="Rewrite" url="/dynamotoolsapi" />
                    </rule>
                </rules>
            </rewrite>                
            <aspNetCore processPath=".TestCalendar.exe" stdoutLogEnabled="true" stdoutLogFile=".logsstdout" hostingModel="inprocess" />
        </system.webServer>
  </location>
</configuration>
<!--ProjectGuid: b6025f4d-4dd5-4a9a-8094-a8e221a9799a-->
  

Комментарии:

1. в вашем браузере отключен javascript? попробуйте включить его и повторите попытку

2. @Jerryc не думаю, что это имеет какое-либо отношение к моему браузеру, к сожалению. Пробовал в нескольких браузерах, на разных компьютерах.

3. этот текст всегда доступен по умолчанию на index.html странице для стандартного create-react-app приложения. Если это так, вы неправильно провели расследование, и проблема может быть в чем-то другом.

4. @SamridhTuladhar есть идеи, с чего мне начать расследование?

5. во-первых, работает ли это с simple npm start (тот, в котором react запускает сервер узла с включенной горячей перезагрузкой, часто называемый режимом разработчика ). Если да, то npm build скопируйте статические файлы на свой сервер и повторите попытку, убедитесь, что URL-адрес совпадает с тем, с которым вы взаимодействовали в npm start , если они не совпадают, пожалуйста, добавьте дополнительный homepage ключ в package.json и повторите попытку.