Node.js create-react-app build

Я довольно новичок в веб-разработке, и меня попросили создать одностраничное приложение с инструментами по моему выбору. Единственное требование состоит в том, что он должен запускаться локально на сервере GlassFish (в NetBeans: Java Web> Web Application). Я использую набор для запуска приложения-реагирования-приложения, предоставленный Facebook для создания приложения. Когда я запускаю npm run build Я получаю папку сборки, содержащую html-файл и js-файл. Но когда я дважды щелкаю html-файл, браузер открывается и просто показывает пустую страницу. Кто-нибудь знает, что мне нужно настроить, чтобы получить связанный html-файл, который показывает приложение, когда я его открываю?Node.js create-react-app build

Спасибо

источник

2017-01-24 Sebastian

Вы проверили консоль браузера на наличие ошибок? –

Я думаю, что вы бы попробовали, https://jhipster.github.io/ scafolding tool для создания JAVA, AngularJS, * Базы данных –

В консоли браузера не было никаких ошибок. – Sebastian

После запуска «npm run build» на вашем создать реагирующими-приложение сгенерированного кода, он отображает инструкции, чтобы помочь только это. Он говорит что-то вроде:

You may also serve it locally with a static server: 

npm install -g pushstate-server 
pushstate-server build

Первой команды «npm install -g pushstate-server» нужно только запустить один раз, так как она устанавливает «PushState-сервер» глобальные НПМ. Вторая команда «pushstate-server build» запускает простой статический сервер, pushstate-сервер и обслуживает любой контент в папке «build» по адресу http://localhost:9000. Вы можете изменить номер порта, если вы хотите, добавив его в конце командной строки: «pushstate-server build 1234»

UDPATE: Serverless метод ...

Если ваша цель состоит в том, чтобы запустить страницу из файла а не с веб-сервера, вам нужно будет настроить build/index.html, чтобы исправить пути к вашим JS и CSS (и, что менее важно, ваш favicon.ico). Index.html, созданный приложением create-react-app, ожидает, что ваши JS и CSS будут находиться в «/ static/...». Однако, когда вы открываете из файловой системы, этот путь неверен. Если вы удалите главную косую черту, сделав относительные URL-адреса, ваша страница правильно загрузится из файловой системы:

После запуска «npm run build» откройте сгенерированный файл «build/index.html». Удалите переднюю косую черту из «/favicon.ico», «/static/js/main.[random string] .js» и «/static/css/main.[random string] .css» и сохраните изменения (так что все читаются «static/...», а не «/ static/...»). Перезагрузите страницу в браузере.

источник

2017-01-24 18:52:01

Спасибо, но нужен ли мне этот pushstate-сервер каждый раз, когда я хочу просмотреть сборку? Моя цель - создать html/js-пакет, который я могу просто распределить кому угодно, и это не зависит от Node.js. – Sebastian

Да, с использованием вышеуказанного метода потребуется, чтобы ваш конечный пользователь запускал какой-то статический HTTP-сервер. Тем не менее, есть способ сделать то, что вы ищете. Я изменю свой ответ, чтобы включить следующее предложение: после запуска «npm run build» откройте сгенерированный файл «build/index.html». Удалите переднюю косую черту из «/favicon.ico», «/static/js/main.[randomstring].js» и «static/css/main. [Random string] .css» и сохраните ваши изменения. Двойной щелчок index.html должен затем загрузить –

Я удалил ведущую косую черту, и она работает, однако другие ресурсы, такие как изображения или значки, не отображаются в приложении. Похоже, что их пути не являются относительными, и они скрыты где-то внутри js-файла. Я нашел их, но пути генерируются конкатенацией строк, поэтому их не так легко манипулировать. Вы знаете, как настроить create-react-app/webpack, чтобы сделать все пути относительными? – Sebastian

ответ

Смежные вопросы