Как правильно развертывать приложение в Heroku?

Question

[Demigodd]

Не могу разобраться как правильно указать ссылки, то есть если я открыл приложение локально то Express сервер был на localhost:3003 а React фронт на localhost:3000.

Как то все логично. Во время запроса через axios основную ссылку указал
axios.defaults.baseURL = http://localhost:3003
то есть запрос делаем на бекенд.

Так же и Socket.IO во время connecta

io(http://localhost:3003, { transports: ['websocket'] });

Сейчас для деплоя как я понял нужен уже собранный React APP который сервер отправит пользователю, ну а дальше пользователь без перезагрузки страниц выполнит запросы и т.д.
Для этого на сервер лежит такой код.

app.use('/', express.static(path.join(__dirname, '../build')));

app.get('/*', (req: any, res: any) => {
  res.sendFile(path.resolve(__dirname, '../build', 'index.html'));
});

Сейчас при вызове npm start выполняю react-scripts build и дальше запускаю сам сервер.

И вот отсюда начинается геморрой.
По идее мне нужно указать 3 ссылки.
1) Для запроса axios.
2) Для подключения Socket.IO.
3) PUBLIC_URL который написан в public/index.html, для manifest.json и favicon.ico.

Как грамотно все это расставить по своим местам ?

Answer 1

[vadimMalovaniy]

На фронте вместо localhost:3003 пропиши window.location.host

Comments

[Demigodd]

А как быть с PUBLIC_URL ?

Он у меня прописан в index.html для подключения %PUBLIC_URL%/favicon.ico
Также и в histroy.

// history.ts

import createBrowserHistory from 'history/createBrowserHistory';

export default createBrowserHistory({ basename: process.env.PUBLIC_URL });

И вообще стоит ли написать basename для history ?

[vadimMalovaniy]

DEATH2298, в index.html можно сделать относительный путь для favicon.ico. Обычно favicon лежит в папке public/ там же где и index.html.

И вообще стоит ли написать basename для history ?

А тебе нужно базовое имя для приложения?