Почему 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. спасибо за отзыв!

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

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

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

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

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

JavaScript

+1 ещё

Простой
Как сделать что таймер не сбрасывался а продолжал работать?
- 1 подписчик
- 5 часов назад
- 71 просмотр
1

ответ
React

+1 ещё

Сложный
Почему рулетка не крутиться?
- 1 подписчик
- 01 дек.
- 95 просмотров
0

ответов
React

Средний
Как реализовать свой простой стейт менеджер для реакта?
- 2 подписчика
- 29 нояб.
- 116 просмотров
1

ответ
React

+1 ещё

Средний
Как перекрутить слайдер в swiper js?
- 1 подписчик
- 28 нояб.
- 64 просмотра
1

ответ
React

+1 ещё

Средний
Как запретить скролл вверх страницы после перехода не неё же только с query параметрами?
- 1 подписчик
- 28 нояб.
- 31 просмотр
0

ответов
React

Простой
Как правильно разделить блок на компоненты?
- 1 подписчик
- 28 нояб.
- 75 просмотров
1

ответ
React

Простой
Есть ли способы применить концепции vue в react?
- 1 подписчик
- 27 нояб.
- 104 просмотра
0

ответов
React

+2 ещё

Простой
Как указать свой путь запроса на сервер react-admin?
- 1 подписчик
- 26 нояб.
- 28 просмотров
0

ответов
React

+1 ещё

Средний
Почему в VS Code весь React проект в ошибках про ненайденные модули, но при этом код работает?
- 1 подписчик
- 26 нояб.
- 78 просмотров
1

ответ
React

Простой
404 ошибка при запуске vite?
- 1 подписчик
- 24 нояб.
- 69 просмотров
1

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

Ведущий React Native разработчик

Студия 15

от 200 000 до 250 000 ₽

Frontend-разработчик React/Next

div. • Ставрополь

от 40 000 до 90 000 ₽

React Native Developer

Wanted. • Санкт-Петербург

До 300 000 ₽

Разработать приложение для конструирования и расчета шкафов-купе

03 дек. 2024, в 22:01

30000 руб./за проект

Сотрудник по размещению объявлений / Удаленно - 1 час в день

03 дек. 2024, в 21:37

7500 руб./за проект

Моделирование электромагнитных полей в Ansys Electronics Desktop

03 дек. 2024, в 20:43

4000 руб./за проект

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'е?

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

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

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