Forums

Hello. I have looked through some of the existing forum topics (see below) but am still having trouble getting my django/react webapp to function. The "/api" route correctly takes me to to my api page, but none of the other routes seem to work (at the moment there is only the root route, /factors, and /chart). When I try going to "/", "/factors", or "/chart", I get an error message saying "Page Not Found" and the following:

Using the URLconf defined in factorsViewer.urls, Django tried these URL patterns, in this order: admin/ api/ The empty path didn’t match any of these.

But the paths "/", "/factors", and "/chart" are only defined in the react "client/src/components/App.js" file so I'm not sure how to tell pythonanywhere.com to look there. I've taken a look at the "static file mappings" page but am unsure if this means to take the entire "client" folder and put it in there. Any suggestions would be appreciated.

https://elledee.pythonanywhere.com/

https://www.pythonanywhere.com/forums/topic/28553/ https://www.pythonanywhere.com/forums/topic/28919/ https://www.pythonanywhere.com/forums/topic/12052/

I think the error message you get is quite helpful -- it says where Django is looking for the urls, it's in factorsViewer.urls. You should set up the urls there -- take a look at the docs: https://docs.djangoproject.com/en/3.2/topics/http/urls/.

Static files mapping is a different topic, but you should take care of it as well. How you map them depends on your app's setup, take a look at our help pages: https://help.pythonanywhere.com/pages/StaticFiles/, https://help.pythonanywhere.com/pages/DjangoStaticFiles.

Thanks for replying pafk. For other all-python projects I understand how to set up the urls.py project and app files so that each url is matched to a specific view which then displays a particular html template. But with a react frontend all of the url routes at the moment only exist on the react side in the App.js file. The entire project works fine on my local machine so I'm not sure what urls exactly need to go in the urls.py file since there are no django views to call.

I'm a bit confused -- do you mean that the actions to take when a particular URL is accessed are defined in JavaScript code in your App.js file? That would suggest that the site is a pure-JavaScript one rather than a mixture of Django and React. Could you clarify where Django comes into the equation?

Yes the App.js file in the React client folder is where all of the actual url paths to display different pages are located. The django backend is just for performing SQL queries that come in from axios.get request from React frontend.

:::javascript App.js

function App() {

  return (
    <div className="App">
      <h1 className="center">Factors Viewer</h1>
      <Router>
        <Main path="/"></Main>
        <Data path="/factors"></Data>
        <Chart path="/chart"></Chart>
      </Router>
    </div>
  );
}

export default App;

::::javascript . . . end App.js

:::python . . . urls.py

from django.contrib import admin
admin.autodiscover()
from django.urls import path, include
from rest_framework import routers
from fv import views
from django.urls import re_path

router = routers.DefaultRouter(trailing_slash=False)
router.register(r'factor', views.FactorViewSet)
router.register(r'fund/get_queryset', views.FundViewSet, basename='Fund')
router.register(r'price/get_queryset', views.PriceViewSet, basename='Price')
# router.register(r'master', views.MasterViewSet)


# This wrapper turns your list into a regex URL matcher
react_views_regex = r'\/|\b'.join([

# List all your react routes here
'/',
'/factors',
'/chart',

]) + r'\/'

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include(router.urls)),
    # I found this in another stackoverflow post for a similar issue but I'm unsure exactly what would go in 
    views.index
    re_path(react_views_regex, views.index),
]

:::python . . . end urls.py

view.index needs to serve a page for your react to run from. Depending on your react project setup, that html page may have already been created and you just need to serve it, or you may need to create one. It would need to load your App.js and execute it on an element in the html so that your react has somewhere to display.

oh ok I see what you mean. thanks glenn I'll try that