Итак, вы хотите разместить свое приложение Single Page React на страницах GitHub?

Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »

Подумайте еще раз! Нет ... Я просто играю, это возможно, но определенно потребуется некоторая настройка, чтобы ваши маршруты отображали правильные компоненты.

GitHub имеет эту функцию под названием GitHub Pages, которая преобразует репозиторий GitHub в живой, дышащий веб-сайт одним нажатием кнопки ... пока это репо a) написано только в коде Frontend (Javascript, CSS и HTML) и очевидно б) не написаны на React. Если вы недавно закончили одностраничное приложение React, такое как я, в котором интенсивно используется библиотека React Router Dom для рендеринга определенных компонентов, когда пользователи переходят по определенным URL-адресам, то это руководство для вас.

Небольшая предыстория (перейдите к разделу, озаглавленному Краткое руководство для тех, кто зол и хочет знать ответы сейчас!, где приведены указанные ответы): после нескольких дней хедбэнгинга я наконец получил мой бэкэнд размещен на Heroku. Вещи налаживались! По крайней мере, я так думал 😠. Когда я попытался разместить свой сайт на страницах GitHub, на которых у меня был некоторый успех в прошлом (см. Мое приложение Duolingo, вдохновленное Трампом, здесь или мой сайт прогнозов волн для лучшего чертова города на берегу Джерси, также известного как мобильный телефон Стратмера, дружественный сайт), но поскольку я использовал React для создания этого конкретного приложения, мне нужно было добавить несколько дополнительных строк кода, чтобы убедиться, что GitHub может распознавать мои компоненты в зависимости от того, какие действия пользователи выполняли на моем сайте.

Краткое руководство для тех, кто зол и хочет узнать ответы прямо сейчас!

Итак, у вас есть приложение React, и оно отлично смотрится на вашем локальном компьютере. Потрясающие! Теперь давайте разместим это в Интернете.

1. Убедитесь, что к вашему локальному проекту подключен удаленный репозиторий GitHub. См. Их документацию для получения инструкций.

2. Запустите npm install.

$ npm install

Это гарантирует, что у вас установлена ​​самая последняя версия npm и node.js. Несмотря на то, что я запускал свой бэкэнд с Rails, без него я получал странные ошибки.

3. Запустите npm run build.

$ npm run build

Это создаст набор файлов Javascript, HTML и CSS, которые GitHub будет использовать для преобразования вашего проекта в файловую структуру, которую может обрабатывать GitHub Pages.

Вы увидите что-то вроде этого ^.

4. Возьмите всю строку «домашняя страница» и добавьте ее в свой package.json.

“homepage” : “http://yourgithubname.github.io/yourreponame",

Эта строка свяжет ветвь, которую вы создаете, с репо, которое вы хотите запустить.

5. Еще раз запустите npm run build.

$ npm run build

Вы увидите, что следующий код в консоли немного изменился по сравнению с прошлым разом. Теперь он гласит:

blah blah blah
"scripts": {
//..
“deploy”: “gh-pages -d build”
}

Вам нужно взять эту строку кода, которую я выделил жирным шрифтом выше, и добавить ее в свой файл package.json под ключом «scripts»:

“scripts”: {
 “start”: “react-scripts start”,
 “build”: “react-scripts build”,
 “test”: “react-scripts test — env=jsdom”,
 “eject”: “react-scripts eject”,
 “predeploy”: “npm run build”,
 “deploy”: “gh-pages -d build”
 }
//bold means I added this line. Do it.

6. Запустите npm run deploy.

$ npm run deploy

Это не только будет использовать плагин GitHub gh-pages для автоматического переноса текущего репо в новую ветку удаленного репо (или, если вы выполнили эту команду до того, как обновят файлы в этой существующей ветке) под видом нового ветвь с именем 'gh-pages', но также автоматически переключает настройки вашего репо для включения страниц GitHub и устанавливает репозиторий, который GitHub Pages будет использовать для рендеринга вашего приложения в ветку 'gh-pages', которая преобразовала все ваши обычные Реагировать на javascript в код, который он может читать.

А теперь самое интересное. Если вы перейдете на сайт страниц GitHub (команда npm run deploy сообщит вам, куда перейти, чтобы увидеть успешно развернутый сайт), что вы увидите? Если вы похожи на меня и не настраивали корневой маршрут, вы увидите ошибку 404.

7. Создайте корневой маршрут и добавьте basename = {process.env.PUBLIC_URL} в качестве опоры к вашему компоненту BrowserRouter.

Вот где началась моя паника, потому что до добавления этого компонента в мой BrowserRouter и перенастройки моего корневого маршрута, когда я перешел на ссылку GitHub Pages, ничего не отображалось. После некоторого обнюхивания в консоли я обнаружил ошибку 404, сообщающую мне, что компонент «Home» не может быть отрисован. Почему мое приложение отлично работало локально, но не на сервере? Введите таинственный неземный process.env.PUBLIC_URL. Если вы console.log («Ваш process.env.PUBLIC_URL», process.env.PUBLIC_URL) и перейдете к правильному URL-адресу страниц GitHub, вы увидите «/ yourreponame» в консоли. Ключ!

Поэтому я добавил опору basename к моему маршрутизатору (с псевдонимом BrowserRouter) в свой файл index.js:

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
import GameOver from ‘./components/GameOver’;
import StartGame from ‘./components/Home’;
import ‘semantic-ui-css/semantic.min.css’;
import { BrowserRouter as Router } from ‘react-router-dom’;
ReactDOM.render(<Router basename={process.env.PUBLIC_URL}>< App /></Router>, document.getElementById(‘root’));

Затем я перешел к своему файлу App.js, чтобы изменить свой корневой маршрут, который изначально выглядел так:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'semantic-ui-css/semantic.min.css';
import { BrowserRouter as Router} from 'react-router-dom';
ReactDOM.render(<Router basename={process.env.PUBLIC_URL}>< App /></Router>, document.getElementById('root'));
// I added the code basename={process.env.PUBLIC_URL} so that in my App.js file I could map my components to certain routes in my App render() function like so:
render() {
    console.log(this.state);
    console.log("This is the process.env", process.env.PUBLIC_URL)
    // debugger
    return (
      <div>
        <Route exact path={`/gameover`} component={GameOver} />
        <Route exact path={`/new`} render={ (routerProps) => < NewUser routerProps={routerProps} />} />
        <Route exact path={`/edit`} render={ (routerProps) => < EditUser routerProps={routerProps} />} />
        <Route exact path={`/home`} render={ (routerProps) => < Home routerProps={routerProps} setUpGame={this.setUpGame} />} />
        <Route exact path={`/gametime`} render={ (routerProps) => < QuestionContainer user1Id={this.state.user1Id} user2Id={this.state.user2Id} gameId={this.state.gameId} routerProps={routerProps}/>} />
      </div>
    );
  }

Видите жирную линию выше? Это действительно была моя целевая страница и то, что я хотел отображать, когда пользователь переходит по моей ссылке. Мне пришлось изменить путь = {‘home’} на {‘/’}. Это означает, что когда путь к маршруту совпадает с 'process.env.PUBLIC_URL' (reponame + '/'), он будет отображать компонент Home. Когда я изменил это, появилась моя целевая страница!

<Route exact path={`/`} render={ (routerProps) => < Home routerProps={routerProps} setUpGame={this.setUpGame} />} />

Фантастика! Мои маршруты настроены правильно. Вернемся к process.env.PUBLIC_URL. Stack Overflow сообщил мне, что process.env.PUBLIC_URL является частью библиотеки node.js и представляет собой динамически сгенерированный URL-адрес, который изменяется в зависимости от того, в каком режиме разработки вы находитесь. in, независимо от того, работаете ли вы над своим приложением локально (в этом случае process.env.PUBLIC_URL, скорее всего, будет http: // localhost: 3000 / или что-то в этом роде), или фактический производственный сервер, такой как страницы GitHub (http://bmcilhenny.github.io/trivia-front-end).

Это подводит меня к следующему разделу этого долгого блога:

Выводы из моей кровавой битвы с GitHub Pages

1. GitHub Pages недостаточно умен, чтобы использовать компонент React Route из коробки. После некоторой небольшой настройки и нескольких часов изучения различных форумов и документации я наконец-то заставил свои маршруты работать и отображать правильные компоненты, хотя по какой-то причине, когда я вручную перешел к определенным URL-адресам, таким как « https: //bmcilhenny.github. io / trivia-front-end / edit » Я наткнулся на ошибку 404. Я мог добраться до этого маршрута через панель навигации на моей домашней странице, но после обновления GitHub все еще выдавал ошибку 404. Мне потребовался еще час, чтобы понять, что это проблема GitHub, а не моя. Благодаря тому, как GitHub преобразует ваше приложение React в репозиторий, подобный GitHub, он всегда обращается к файлу index.html для рендеринга. Поэтому вам нужно добавить сценарий в файл index.html для хакерского перенаправления из файла index.html на нужный компонент.
2. Если вы используете компонент Link из библиотеки react-router-dom и хотите сделать обратную ссылку на свою целевую страницу (возможно, для кнопки «Вернуться на главную»), я безуспешно пробовал эти варианты:

//1. I tried: <Menu.Item as={Link} to={process.env.PUBLIC_URL} >
//2. and this: <Menu.Item as ={Link} to=”/” > to no avail.

Только когда я указал ссылку на = "", он фактически отрисовал нужный компонент, что для меня не имеет смысла, но, эй, иногда так происходит программирование.

После того, что кажется мне столетием биться головой о самую твердую и грубую кирпичную стену, я, наконец, смог разместить свое фронтенд-приложение React на страницах GitHub Pages, по крайней мере, я так думал.

Обработка аппаратных обновлений на маршрутах, не являющихся вашим корневым маршрутом

Что касается того, как большинство вещей работает в жизни, только когда я исправил проблему с небольшим руководством, я увидел, что как часть файлов, которые входят в приложение React, есть README.md, который гласит:

#### Notes on client-side routing
GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).

Хотя вы можете отправить browserHistory по маршруту, подобному «/», локально вы теряете доступ к browserHistory на GitHub. Если вы используете browserHistory.push где-нибудь в своем приложении, вы захотите удалить его и изменить на Redirect to = "route" или Link to = "route".

ДЛЯ ВАШЕЙ ИНФОРМАЦИИ. Когда вы выполняете жесткое обновление на определенном маршруте маршрутизатора, например / newuser, вы увидите ошибку 404. Поскольку страницы GitHub могут читать только одну страницу, то есть файл index.html, он не узнает о существовании / newuser. На самом деле React Router обманывает ваш браузер, заставляя его думать, что он находится на фактическом новом адресе, хотя на самом деле все, что он делает, - это изменение текста внутри URL-адреса, а не местоположения URL-адреса клиента. Поэтому рекомендуют перейти на hashHistory.

8,5 часов процесса и изменение моих маршрутов снова казалось довольно непростым делом с учетом обстоятельств, поэтому я выбрал хакерский путь. Какой-то ангел написал 2 сценария, которые обрабатывают эти жесткие обновления, чтобы ваш браузер автоматически возвращался в файл index.html (также известный как ваш корневой маршрут), если он обнаруживает ошибку 404, а затем переходит к правильному / route, который вы вызвали. жесткое обновление.

Ознакомьтесь с моим готовым проектом здесь. Спасибо Джошу Стилману за то, что он был логичным партнером ниндзя и объединился со мной, чтобы покорить эту гору за 4 дня.

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

Вы зашли так далеко? Большое спасибо за чтение! Я всегда ищу отзывы о своих блогах и проектах. Не бойтесь оставлять комментарии или отправлять мне сообщения. Вы тоже собираетесь сделать карьеру в области разработки программного обеспечения? Я хотел бы подключиться к Linkedin.

Нравится мое письмо? Ознакомьтесь с другими моими статьями👇 внизу.