Почему Django не рендерит React bundle в production'е?

Question

Михаил Жигарев @ZhygarevMikhail

Стараюсь изучить фронтэнд

React
Django

Почему Django не рендерит React bundle в production'е?

Делаю приложуху на Django+React. На локалхосте все норм, но когда деплою на Heroku ничего не работает.
В консоли следующее:

Пробовал в шаблоне изменить "text/javascript" на "text/babel" и "text/jsx". В результате приложуха перестает работать и на локалхосте. Остается предупреждение по CSS файлу, а SyntaxError пропадает. Выяснил, что когда меняешь "text/javascript" на что-то другое, то bundle просто не грузится, и соотвественно нечему рендерить. Пробовал и ".js" и ".jsx" файлы, не работает.
Может кто-нибудь знает в чем проблема ?

Вопрос задан более трёх лет назад
151 просмотр

12 комментариев

Подписаться 1 Простой 12 комментариев

sim3x @sim3x

больше кода - меньше скриншотов

Написано более трёх лет назад
Михаил Жигарев @ZhygarevMikhail Автор вопроса

sim3x, код чего именно интересует ? Фронта, бэка ?

Написано более трёх лет назад
sim3x @sim3x

Михаил, бек

Написано более трёх лет назад

Михаил Жигарев @ZhygarevMikhail Автор вопроса

index.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&amp;subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet">
    <title>Digits classifier frontend</title>
    <link href="/static/css/main.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.js"></script>
</body>
</html>

views.py

class FrontendAppView(View):
    @staticmethod
    def get(request):
        return render(request, os.path.join(settings.TEMPLATE_PATH, 'index.html'))

    @staticmethod
    def post(request):
        if request.POST:
            img = base64.b64decode(request.read())
            ...
            return HttpResponse(result, content_type='application/json')
        else:
            return render(request, os.path.join(settings.TEMPLATE_PATH, 'index.html'))

Написано более трёх лет назад

Михаил Жигарев @ZhygarevMikhail Автор вопроса

sim3x думаю, урлы не надо ведь?
settings.py нужен ?

Написано более трёх лет назад
Михаил Жигарев @ZhygarevMikhail Автор вопроса

sim3x, вообще, весь проект вот тут .

Написано более трёх лет назад
sim3x @sim3x

Михаил, у вас ошибка в другом месте, по крайней мере на скриншоте

Используйте JsonResponse

Зачем os.path.join(settings.TEMPLATE_PATH, 'index.html')
и
img = base64.b64decode(request.read())?

Написано более трёх лет назад
sim3x @sim3x

__pycache__ в гитигнор и удалить из репы

Написано более трёх лет назад
Михаил Жигарев @ZhygarevMikhail Автор вопроса

sim3x, кэш удалю, спасибо, не обратил внимания.
Действительно, незачем. Спасибо. сделал прост 'index.html'
А после img = base64.b64decode(request.read()) идет обработка запроса, которую я не вставил, чтобы не раздувать коммент. а если вопрос про то, зачем b64decode, то потому что картинка преобразуется в base64 перед передачей.
У меня есть только одно предположение, что это gunicorn как-то не так работает, сейчас проверю. На локалхосте же, если не ошибаюсь, приложуха запускается так: python3 manage.py runserver

Написано более трёх лет назад
Максим @maxfarseer

Михаил проверьте роуты. Такая ошибка, обычно когда по URL'у который у вас настроен на получение бандла приходит html страница (индексовая обычно). Чтобы работала приложуха, на все запросы кроме /index.html должен отдаваться bundle.

Написано более трёх лет назад
Михаил Жигарев @ZhygarevMikhail Автор вопроса

Максим, Спасибо за ответ. Я уже разобрался. Затуп со статикой был)
Заодно скажу спасибо за книги на gitbook. Очень полезные )
А можно немного оффтопа?
Сейчас делаю приложуху(не эту), React+Redux+Router. Сейчас ковыряюсь с react-router, подглядывая в Вашу книгу. Проблема в том, что на локалхосте все нормально работает, но если хостить на github'e, то по ссылкам не переходит. И если собирать приложение, то index.html просто ничего не рендерит, если есть роутинг. Можно это как-то пофиксить?
Пробовал 2.2 версию роутера. С ней работает локалхост, а все остальное нет. Сейчас пытаюсь заставить работать 4.2 версию.

Написано более трёх лет назад
Максим @maxfarseer

Михаил, 4+ версия роутера уже отличается сильно, поэтому лучше в офф.доку подглядывать. 3я (и 2я) версия роутера в целом одинаковые.
p.s. спасибо за отзыв!

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

React

Средний
Почему зависает анимация GSAP при работе с REACT?
- 1 подписчик
- 15 часов назад
- 23 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как в react-chartjs-2 задать отступ между круговой диаграммой и лейблами?
- 1 подписчик
- 19 часов назад
- 35 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как перевести vanilla js класс в react среду?
- 1 подписчик
- 29 мар.
- 127 просмотров
1

ответ
React

Средний
Как в 1 :id добавить несколько слешей?
- 1 подписчик
- 29 мар.
- 254 просмотра
1

ответ
React

+2 ещё

Простой
Как посадить React 19 на Laravel 12 с отладкой только фронта?
- 1 подписчик
- 27 мар.
- 131 просмотр
1

ответ
React

+2 ещё

Средний
Canvas на девайсах с высоким dpr. Как масштабировать динамическое содержимое canvas?
- 1 подписчик
- 26 мар.
- 95 просмотров
1

ответ
Django

Простой
Как установить связь «2 ко многим» без промежуточной таблицы?
- 1 подписчик
- 26 мар.
- 96 просмотров
2

ответа
Django

Простой
Как в Django передать своё сообщения пользователю при обработке исключения ProtectedError?
- 1 подписчик
- 26 мар.
- 65 просмотров
1

ответ
React

Простой
Что делать когда два React context зависят друг от друга?
- 1 подписчик
- 25 мар.
- 88 просмотров
1

ответ
React

+2 ещё

Простой
Как отдавать боту 200 если файла нет?
- 1 подписчик
- 24 мар.
- 127 просмотров
3

ответа
Показать ещё Загружается…

Rust React Developer

Magic Alchemy

от 300 000 ₽

React-Native / Expo.dev - разработчик

SwiftDrive

от 150 000 до 250 000 ₽

Разработчик Frontend (React) Senior

Decart IT-production

от 240 000 до 290 000 ₽

sim3x, код чего именно интересует ? Фронта, бэка ?
index.html

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext" rel="stylesheet"> <title>Digits classifier frontend</title> <link href="/static/css/main.css" rel="stylesheet"> </head> <body> <div id="root"></div> <script type="text/javascript" src="/static/js/main.js"></script> </body> </html>

views.py
class FrontendAppView(View): @staticmethod def get(request): return render(request, os.path.join(settings.TEMPLATE_PATH, 'index.html')) @staticmethod def post(request): if request.POST: img = base64.b64decode(request.read()) ... return HttpResponse(result, content_type='application/json') else: return render(request, os.path.join(settings.TEMPLATE_PATH, 'index.html'))
sim3x думаю, урлы не надо ведь?
settings.py нужен ?
Михаил, у вас ошибка в другом месте, по крайней мере на скриншоте

Используйте JsonResponse

Зачем os.path.join(settings.TEMPLATE_PATH, 'index.html')
и
img = base64.b64decode(request.read())?
__pycache__ в гитигнор и удалить из репы
sim3x, кэш удалю, спасибо, не обратил внимания.
Действительно, незачем. Спасибо. сделал прост 'index.html'
А после img = base64.b64decode(request.read()) идет обработка запроса, которую я не вставил, чтобы не раздувать коммент. а если вопрос про то, зачем b64decode, то потому что картинка преобразуется в base64 перед передачей.
У меня есть только одно предположение, что это gunicorn как-то не так работает, сейчас проверю. На локалхосте же, если не ошибаюсь, приложуха запускается так: python3 manage.py runserver
Михаил проверьте роуты. Такая ошибка, обычно когда по URL'у который у вас настроен на получение бандла приходит html страница (индексовая обычно). Чтобы работала приложуха, на все запросы кроме /index.html должен отдаваться bundle.
Максим, Спасибо за ответ. Я уже разобрался. Затуп со статикой был)
Заодно скажу спасибо за книги на gitbook. Очень полезные )
А можно немного оффтопа?
Сейчас делаю приложуху(не эту), React+Redux+Router. Сейчас ковыряюсь с react-router, подглядывая в Вашу книгу. Проблема в том, что на локалхосте все нормально работает, но если хостить на github'e, то по ссылкам не переходит. И если собирать приложение, то index.html просто ничего не рендерит, если есть роутинг. Можно это как-то пофиксить?
Пробовал 2.2 версию роутера. С ней работает локалхост, а все остальное нет. Сейчас пытаюсь заставить работать 4.2 версию.
Михаил, 4+ версия роутера уже отличается сильно, поэтому лучше в офф.доку подглядывать. 3я (и 2я) версия роутера в целом одинаковые.
p.s. спасибо за отзыв!

Почему Django не рендерит React bundle в production'е?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт