Как запустить приложение react на tomcat

ProgramBox

Как запустить приложение react на tomcat

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#tomcat #reactjs #npm

Вопрос:

Я пытаюсь запустить следующий пример: https://github.com/ceolter/ag-grid-react-example

(пример ag-grid react)

Но вместо этого npm run я хочу запустить его на tomcat. Как это сделать?

Ответ №1:

Вы можете легко развернуть любые статические файлы на Tomcat. Связанный вами проект не имеет скрипта для создания рабочей версии образца, поэтому вам нужно сделать следующее:

Установите webpack локально: npm install -g webpack
Сборка демо: webpack --config webpack.config.standard.js --progress --colors --hot --inline или webpack --config webpack.config.large.js --progress --colors --hot --inline . Он создаст dist каталог.
В webapps каталоге Tomcat create создайте другой каталог для вашей демонстрации ag-grid .
Скопируйте index.html и dist в ag-grid .
Получите к нему доступ http://host:port/ag-grid .

1. Получение следующей ошибки при попытке выполнить шаг 2:path.js:8 выбрасывает new TypeError(‘Путь должен быть строкой. Получено ‘ ^ Ошибка типа: путь должен быть строкой. Получено [ ‘webpack.config.standard.js ‘, ‘webpack.config.large.js » ]

2. Извините, игнорируйте приведенный выше комментарий. Мой плохой!

3. Итак, у меня есть еще один файл demo.jsp, который считывает данные из некоторой базы данных и преобразует эти данные в json, я делаю следующее в своем файле jsp: JSONArray JSONArray = new JSONArray(orderDetailsList1); <тип ввода=»скрытое» значение='<%out.println(JSONArray);%>’ id=»JSONArray»/> Могу ли я прочитать эти данные json в моем проекте ag-grid? Может быть, сделать: var jsondata = document.getElementById(«JSONArray»).value; var json = JSON.parse(jsondata); c

4. Возможно ли сделать вышеуказанное?

5. Я показал вам, как запустить example в Tomcat — то, что вы просили. Теперь вы просите меня сделать эту работу за вас. Я рекомендую обратиться к документации ag-grid и узнать, как заполнить grid данными, поступающими из серверной части.

Ответ №2:

Выполнить

 npm run build

Это создаст развертываемую версию вашего приложения во build вложенной папке внутри дерева вашего проекта. Все, что вам нужно сейчас, это скопировать файл index.html со всеми его друзьями из этой папки в ваш каталог Tomcat, предназначенный для обслуживания статических файлов. Это верхний уровень в папке приложения Tomcat. Стандартная компоновка каталогов описана здесь .

Также очень просто создать реальное веб-приложение (.war), как описано здесь . Статические файлы просто находятся на верхнем уровне архива, вам также следует настроить страницы по умолчанию в WEB-INF/web.xml внутри архива. Такое приложение можно развернуть из консоли администрирования Tomcat.

1. Предполагается, что приложение было создано с помощью Create React App , чего нет в приведенном примере.

2. Пробовал это на Tomcat 9.x; обратите внимание, что вам может потребоваться поместить папку ‘static’ непосредственно под ‘webapps’, чтобы она работала без ошибок 404.

3. Простой запуск npm run build не заставит его работать на Tomcat. ‘npm run build’ создает приложение js, но не делает его готовым к развертыванию на конкретном веб-сервере. Существует множество переменных и движущихся частей для развертывания приложений js, и способ развертывания на Tomcat будет зависеть от многих факторов .. например, контекстная папка, версия Tomcat и т. Д.

4. Созданное js-приложение может быть развернуто на любом сервере, если этот сервер может обслуживать базовое содержимое HTML / JS.

5. куда я помещаю файл .env? Меня попросили поместить его в папку conf в Tomcat, но вне проекта. Возможно ли это сделать?

Ответ №3:

 <html>
<head>
    <title>Redux Counter Example</title>
</head>
<body>
    <div id="root">
    </div>
</body>
<script src="~/Scripts/frontend/dist/bundle.js"></script>
</html>

Ответ №4:

Несмотря на то, что я не делал этого с Tomcat, я развернул его с помощью IIS. Таким образом, вы можете адаптировать метод к Tomcat.

Я создал пустое приложение MVC с контроллером по умолчанию и представлением по умолчанию, чтобы получить всю магию MVC, которую предоставляет Microsoft.
Я создал приложение React Redux с помощью webpack и отправил все в папку dist, в которой были все ресурсы, необходимые для приложения. Посмотрите, как создать приложение React с помощью webpack, для получения более подробной информации об этом.
В теге script, который предоставлял мой основной вид, я установил его так, чтобы он указывал на папку dist со всем кодом React.
Я запустил приложение через процесс сборки Visual Studio, и код React запустился, когда представление обслуживалось IIS.
Маршрутизация работала так же хорошо, как и инструменты Redux dev.

DefaultController.cs

 public class DefaultController : Controller
{
    // GET: Default
    public ActionResult Index()
    {
        return View();
    }
}

RouteConfig.cs

 public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "",
                defaults: new { controller = "Default", action = "Index" }
            );

            routes.MapMvcAttributeRoutes();
        }
    }

Default.cshtml

 <html>
<head>
    <title>Redux Counter Example</title>
</head>
<body>
    <div id="root">
    </div>
</body>
<script src="~/Scripts/frontend/dist/bundle.js"></script>
</html>