Почему 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

+2 ещё

Средний
Как убрать бесконечный цикл Zustand?
- 1 подписчик
- 22 апр.
- 93 просмотра
1

ответ
React

Средний
Какой правильный код debounce React?
- 1 подписчик
- 16 апр.
- 97 просмотров
1

ответ
React

+3 ещё

Простой
Как сделать кликабельные аннотации в react-pdf?
- 1 подписчик
- 16 апр.
- 56 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как отследить кнопку «назад» на телефонах?
- 3 подписчика
- 14 апр.
- 381 просмотр
2

ответа
React

Простой
Можно ли менять значения импортируемого файла после билда проекта?
- 1 подписчик
- 08 апр.
- 81 просмотр
1

ответ
Node.js

+1 ещё

Простой
Как подключить модуль выше по иерархии?
- 1 подписчик
- 07 апр.
- 124 просмотра
1

ответ
React

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

ответов
JavaScript

+4 ещё

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

ответов
JavaScript

+1 ещё

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

ответ
React

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

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

Разработчик React Native

Nomadic Soft

от 1 600 до 2 240 $

React Native разработчик

IN-ZHIR

До 150 000 ₽

React разработчик

Мойдекс

от 40 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'е?

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

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

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