Django、webpack、reactjs、react-routerとフロントエンドとバックエンドのデカップリング

私のプロジェクトでフロントエンドとバックエンドをデカップリングしようとしています。私のフロントエンドはreactjsで、ルーティングはreact-routerで、バックエンドはフォームDjangoになっています。フロントエンドを使ってDjangoにAPI（ajax）を呼び出す予定です。Django、webpack、reactjs、react-routerとフロントエンドとバックエンドのデカップリング

今、私はこれら2つの端を互いに正しく話す方法をよく分かりません。私はすべての私のJSとCSSを構築し、このようになりますwebpack_loaderでindex.htmlにそれを置くためにwebpackを使用

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

：ここ

は私のプロジェクトここ

からlinkは私のプロジェクト構造です。

{% 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>

ここに私のcherngloong/urls.py：

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()

私はジャンゴから私のアプリを果たすか、任意のURLで同じビューを提供するためにジャンゴを作成する必要はありません。

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

export default routes;

私は現在、サーバーを実行することができますが、私は、フロントエンド部分を実行したとき、私は

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

出典

2015-10-22 Liondancer

開発ツールに表示されるエラーを表示するURLはありますか？ – user2719875

この質問の前の回答を見てください[ここ]（http://stackoverflow.com/questions/10216827/django-static-files-wont-load/10243622#10243622） – krs

@ user2719875 'localhost：8000 /' – Liondancer

あなたsettings.pyが定義する開発ツールでこれを参照してください。ここで

は私react-routerルートです以下：

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

これは、彼は/app/ディレクトリにファイルします。したがって、URL /static/public/js/は/app/public/js/ディレクトリに変換されます。

/public/ dirのファイルを配信します。次の設定を使用します。

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') 
    } 
}

また、URLはあなたがここに掲載のコードにし、githubのに異なっています。 url(r'', Templa...はすべてのURLと一致し、/api/を呼び出す場合でもindex.htmlと表示されます。この行を下に移動してください：

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')), 
]

出典

2015-10-22 09:54:14

Django、webpack、reactjs、react-routerとフロントエンドとバックエンドのデカップリング

答えて

関連する問題