frontend disaccoppiato e backend con Django, webpack, reactjs, react-router

Sto cercando di disaccoppiare il mio frontend e il mio backend nel mio progetto. Il mio front-end è composto da reactjs e il routing verrà eseguito con react-router, il mio back-end se creato con il modulo Django e ho intenzione di utilizzare il front-end per effettuare chiamate API (ajax) su Django.frontend disaccoppiato e backend con Django, webpack, reactjs, react-router

In questo momento non sono sicuro di come ottenere queste due estremità per parlare tra loro correttamente.

Ecco il link al mio progetto

Qui è la mia struttura del progetto:

/cherngloong 
    /app (frontend) 
    /cherngloong 
    /templates 
     index.jtml 
    urls.py 
    settings.py 
    ... 
    /contact 
    urls.py 
    views.py

Io uso webpack di costruire tutti i miei JS e CSS e metterlo in index.html con webpack_loader che assomiglia a questo:

{% load render_bundle from webpack_loader %} 
<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Example</title> 
    </head> 

    <body> 
    <div id="app"></div> 
    {% render_bundle 'main' %} 
    </body> 
</html>

In Django qui sono le mie.210:

urlpatterns = [ 
    url(r'^admin/', include(admin.site.urls)), 
    url(r'', TemplateView.as_view(template_name='index.html')), 
    url(r'^api/', include('contact.urls')) 
] 

urlpatterns += staticfiles_urlpatterns()

Non voglio servire il mio app da Django Django o fare per servire la stessa vista su qualsiasi URL.

qui sono i miei react-router percorsi:

var routes = (
    <Router> 
     <Route path="/" component={ Views.Layout } > 
      <Route path="contact" component={ Views.Contact }/> 
     </Route> 
     <Route path="*" component={ Views.RouteNotFound } /> 
    </Router> 
); 

export default routes;

posso attualmente eseguire il server, ma quando ho eseguito la parte di front-end, vedo questo nelle strumenti di sviluppo

http://localhost:8000/static/public/js/main.js Failed to load resource: the server responded with a status of 404 (NOT FOUND)

fonte

2015-10-22 Liondancer

Quale URL stai visitando per visualizzare l'errore negli strumenti di sviluppo? – user2719875

Vedere la mia risposta precedente per questa domanda [qui] (http://stackoverflow.com/questions/10216827/django-static-files-wont-load/10243622#10243622) – krs

@ user2719875 'localhost: 8000 /' – Liondancer

tuo settings.py definisce il seguente:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'app'), 
)

Questo servirà t file nella directory /app/. quindi l'url /static/public/js/ viene convertito nella directory /app/public/js/.

Quello che si desidera è servire i file nella directory /public/. Utilizzare le seguenti impostazioni:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'public'), 
) 

WEBPACK_LOADER = { 
    'DEFAULT': { 
     'BUNDLE_DIR_NAME': 'js/', 
     'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json') 
    } 
}

Inoltre, gli URL sono diversi nel codice hai postato qui e in github. Lo url(r'', Templa... corrisponderà a tutti gli URL e renderà solo index.html anche quando si effettuano chiamate allo /api/. Sposta questa riga verso il basso:

urlpatterns = [ 
    url(r'^admin/', include(admin.site.urls)), 
    url(r'^api/', include('contact.urls')), 
] 

urlpatterns += staticfiles_urlpatterns() 

urlpatterns += [ 
    url(r'', TemplateView.as_view(template_name='index.html')), 
]

fonte

2015-10-22 09:54:14

frontend disaccoppiato e backend con Django, webpack, reactjs, react-router

risposta

Problemi correlati