Тайна разгадана

Недавно компания, с которой я проводил собеседование, попросила меня создать для них приложение, которое удовлетворяло бы следующим критериям.

Используйте API New York Times

Представьте 10 последних новостей по теме.

При нажатии на историю создайте небольшое резюме и ссылку на статью.

[…]

Сделайте приложение адаптивным, чтобы оно могло быть удобным как для мобильных устройств, так и для настольных компьютеров.

Приложение должно запускаться при открытии файла index.html.

Естественно, React казался инструментом для работы, и я выполнил поставленную задачу с относительно небольшим количеством ударов по пути.

(Примечание: если вам интересно посмотреть мое приложение - оно доступно здесь https://infallible-tesla-146517.netlify.com/)

Однако была одна проблема: когда я щелкал файл index.html, все, что я видел в браузере, было пустым экраном! Раньше я всегда предполагал, что когда вы npm run build Webpack вытаскиваете все в результирующий index.html файл. Очевидно, мне здесь было чему поучиться.

Create-React-App

Поэтому я начал разговаривать с другими разработчиками, чтобы попытаться получить совет. И полученные мной отзывы указали на create-react-appпроблему. Если бы я хотел узнать больше, я мог бы попытаться использовать npm run eject (который помещает скрипты, запускаемые npm start, среди прочего, непосредственно в каталог вашего приложения), чтобы узнать немного больше о том, что происходит под капотом.

Итак, что делает «npm start»?

Помимо прочего, npm start использует webpack-dev-server (который, как следует из названия, запускает сервер, с которым вы можете общаться). Как вы можете видеть здесь:

const WebpackDevServer = require('webpack-dev-server');

Итак, следующим шагом в моем путешествии было посмотреть, как настроен WebPackDevServer. Там, в webpack.config.js, я нашел ответ, который искал:

// Webpack uses `publicPath` to determine where the app is being served from.
  // It requires a trailing slash, or the file assets will get an incorrect path.
  // In development, we always serve from the root. This makes config easier.
  const publicPath = isEnvProduction
    ? paths.servedPath
    : isEnvDevelopment && '/';
  // Some apps do not use client-side routing with pushState.
  // For these, "homepage" can be set to "." to enable relative asset paths.
  const shouldUseRelativeAssetPaths = publicPath === './';

Открыть приложение через index.html не работает, потому что Webpack пытался загрузить статические файлы из корня моей файловой системы, а не из каталога сборки. Чтобы исправить это, все, что мне нужно было сделать, это добавить следующую (выделенную) строку кода в мой package.json файл.

"name": "louis_raymond_blue_harvest_challenge",
  "version": "0.1.0",
  "homepage":".",
  "private": true,
  "dependencies": {
    "bootstrap": "^4.2.1",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.7",
    "react": "^16.7.0",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.3"
  },

Затем я повторно запустил npm run build и открыл файл index.html в папке сборки: Наконец-то успех ...

Заключение

Хотя такие инструменты, как create-react-app, отлично подходят для начальной загрузки проектов и быстрого начала работы, всегда полезно заглянуть под капот и немного узнать о том, как работают инструменты, которые вы используете.

Не бойтесь отдернуть занавес, исследуйте исходный код некоторых из ваших любимых инструментов!