У цьому підручнику ми будемо робити базову програму React + Node, розгорнуту на Heroku.
Є багато підручників, які роблять це лише за допомогою командного рядка, тому, щоб трохи змінити ситуацію, я буду робити це повністю без командного рядка.
Для таких речей, як генерація програм React та Express, нам не залишається іншого вибору, як використовувати командний рядок. Для всього іншого ми будемо використовувати графічний інтерфейс.
Я також припускаю, що у вас є обліковий запис Github та Heroku. Вони обидва безкоштовні, тому не турбуйтеся про реєстрацію.
зразок проекту:
//github.com/iqbal125/react-express-sample
Реагуйте та експрес-налаштування
По-перше, давайте почнемо зі створення двох каталогів з іменами Сервер та Клієнт.
Клієнтський каталог міститиме вміст create-react-appкоманди, а Сервер - вміст expressкоманди. Ця бібліотека просто автоматично створює для нас простий додаток Express, подібний до create-react-app. Її потрібно встановити глобально, що можна зробити за допомогою команди:
npm install -g express-generator
Після цього просто запустіть ці команди у кожному з відповідних каталогів, щоб встановити початкові проекти:
npx create-react-app app1в каталозі клієнта
expressу каталозі сервера
Перейдіть до каталогу app1, згенерованого create-react-appта запущеного:
npm run build
Це згенерує виробничу версію проекту, яка оптимізована для виробничого розгортання, з такими видами, як код обробки помилок та пробіли.
Примітка: У збірці розробки ви використовували б проксі // localhost: 5000 для зв'язку з вашої програми React на ваш сервер Express, але тут програма React та сервер Express - це лише один проект. Сервер Express обслуговує файли React.
Далі виріжте та вставте весь каталог збірки в каталог сервера . Структура вашого проекту повинна виглядати так:
Тепер ми можемо додати деякий код, щоб наш сервер Express знав, що обслуговує наш проект React.
.... app.use(express.static(path.join(__dirname, 'build'))); app.get('/*', (req, res) => { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); .... Перший рядок коду обслуговує всі наші статичні файли з каталогу збірки .
Другий фрагмент коду - підтримувати функціонування маршрутизації на стороні клієнта. Цей код по суті обслуговує index.htmlфайл на будь-яких невідомих маршрутах. В іншому випадку нам доведеться переписати всю нашу маршрутизацію для роботи з цим налаштуванням сервера Express.
Щоб протестувати свою програму, просто запустіть npm startу каталозі сервера та перейдіть до // localhost 3000 у браузері. Тоді ви повинні побачити запущений додаток React.
Тепер ми готові завантажити цей проект на GitHub.
GitHub
Замість того, щоб використовувати командний рядок для завантаження на GitHub, ми зробимо це за допомогою графічного інтерфейсу. Спочатку перейдіть на домашню сторінку GitHub і створіть нове сховище. Назвіть його як завгодно, але переконайтеся, що Ініціалізуйте це сховище, позначивши опцію README :
Потім завантажте всі файли проекту без каталогу node_modules .
Клацніть на фіксацію, і ми закінчили. Ваші завантажені файли проектів з’являться на GitHub так:
Тепер ми можемо перейти до налаштування Heroku.
Героку
Перейдіть на інформаційну панель Heroku, створіть нову програму та назвіть її як завгодно.
Далі перейдіть на вкладку Розгортання та виберіть GitHub у розділі Метод розгортання:
Якщо ви ще не підключили свій обліковий запис GitHub до свого облікового запису Heroku, вам буде запропоновано виконати процедуру авторизації GitHub.
Після цього знайдіть свій проект на GitHub і підключіться до нього:
Нарешті, ми можемо просто розгорнути наш додаток, натиснувши кнопку Розгорнути гілку:
Heroku автоматично встановить для вас усі модулі Node. Ви можете переглянути свій проект, натиснувши кнопку Переглянути.
І все, ми закінчили! Дякуємо за читання.
Зв’яжіться зі мною у Twitter, щоб отримати додаткові відомості про майбутні підручники: //twitter.com/iqbal125sf