I've been trying to deploy an app to pythonanywhere but the page is just blank, because main.6f259c1b.js file throws error`
Uncaught SyntaxError: Unexpected token <
` I've been following the instuctions on this article https://www.fusionbox.com/blog/detail/create-react-app-and-django/624/ and this https://www.techiediaries.com/create-react-app-django/ both articles suggest to create a view with following content
class FrontendAppView(View):
"""
Serves the compiled frontend entry point (only works if you have run `yarn
run build`).
"""
def get(self, request):
try:
with open(os.path.join(settings.REACT_APP_DIR, 'build', 'index.html')) as f:
return HttpResponse(f.read())
except FileNotFoundError:
logging.exception('Production build of app not found')
return HttpResponse(
"""
This URL is only used when you have built the production
version of the app. Visit http://localhost:3000/ instead, or
run `yarn run build` to test the production version.
""",
status=501,
)
and in app website/urls.py
urlpatterns = [
url(r'^', FrontendAppView.as_view())
]
Those instructions don't work for me. It's something that related to pushState routing, react-routing, I don't know. My app works ok in development server in localhost:3000, it only seen in pythonanywhere and local apache server with mod_wsgi. This is my config of local apache(from Django documentation):
WSGIScriptAlias / /home/user/projects/myproject/myproject/wsgi.py
WSGIPythonHome /home/user/.virtualenvs/myproject
WSGIPythonPath home/user/projects/myproject/
<Directory /home/user/projects/myproject/myproject>
<Files wsgi.py>
Require all granted
</Files>
</Directory>
This is root
DocumentRoot "/srv/http"
Part of my settings
REACT_APP_DIR = os.path.join(BASE_DIR, 'frontend')
STATIC_URL = '/static/'
STATIC_ROOT = 'static'
STATICFILES_DIRS = [
os.path.join(REACT_APP_DIR, 'build', 'static')
]
All software are latest release. Maybe this comment solves my problem, I just don't understand it. https://github.com/facebookincubator/create-react-app/issues/1812#issuecomment-286511320
This is my localhost screenshot
My project directory structure
├── api_v0
│ ├── admin.py
│ ├── apps.py
│ ├── __init__.py
│ ├── migrations
│ ├── models.py
│ ├── __pycache__
│ ├── serializers.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── myproject
│ ├── __init__.py
│ ├── local.py
│ ├── __pycache__
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── frontend
│ ├── build
│ ├── node_modules
│ ├── package.json
│ ├── package-lock.json
│ ├── public
│ ├── README.md
│ └── src
├── manage.py
├── requirements.txt
├── static
│ ├── admin
│ ├── css
│ ├── js
│ ├── media
│ └── rest_framework
└── website
├── admin.py
├── apps.py
├── __init__.py
├── management
├── middleware.py
├── migrations
├── models.py
├── __pycache__
├── tests.py
├── urls.py
└── views.py
