前提・実現したいこと
Docker/React/Django/PostgresSQLを使って開発環境を構築しています。
DjangoとReactの連携がうまくできず困っています。
localhost:8000/react_appにアクセスしたらreact側のindex.jsがdjango側のindex.htmlに反映されるようにしたいです。
■やったこと
Reactのプロジェクト配下にwebpack.config.jsを作成
■問題点
docker-compose exec node yarn webpack コマンド入力後、backend/react_app配下にstatic/jsが作成されない
■参考記事
https://qiita.com/shiranon/items/8182445975dff4cf19a6
###webpack.config.js
const path = require('path'); module.exports = { mode: 'development', entry: './src/index.js', //buildするファイル output: { filename: 'bundle.js', //build後のファイル名 path: path.join(__dirname, '../../backend/react_app/static/js') //buildファイルが作成される場所 }, module: { rules: [ { test: /.js[x]?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ '@babel/preset-env', '@babel/preset-react' ], plugins: ['@babel/plugin-syntax-jsx'] } } } ] }, resolve: { extensions: ['.js', '.jsx', '.json'] } };
###config/urls.py
from django.contrib import admin from django.urls import path, include from api import views urlpatterns = [ path('admin/', admin.site.urls), path('react_app/', include('react_app.urls')), path('api/', include(views.router.urls)), ]
react_app/urls.py
from django.urls import path from . import views urlpatterns = [ path('', views.index, name='index'), ]
###react_app/views.py
from django.shortcuts import render def index(request): return render(request, 'main/index.html')
###react_app/templates/main/index.html
{% load static %} <html lang="en"> <head> <meta charset="utf-8"> <title>React</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="{% static 'js/bundle.js' %}" ></script> </body> </html>
ディレクトリ構成
0. C:. 0. ├─backend 0. │ ├─api 0. │ │ └─migrations 0. │ ├─config 0. │ │ └─__pycache__ 0. │ ├─pg_data 0. │ │ ├─base 0. │ │ │ ├─1 0. │ │ │ ├─13394 0. │ │ │ └─13395 0. │ │ ├─global 0. │ │ ├─pg_commit_ts 0. │ │ ├─pg_dynshmem 0. │ │ ├─pg_logical 0. │ │ │ ├─mappings 0. │ │ │ └─snapshots 0. │ │ ├─pg_multixact 0. │ │ │ ├─members 0. │ │ │ └─offsets 0. │ │ ├─pg_notify 0. │ │ ├─pg_replslot 0. │ │ ├─pg_serial 0. │ │ ├─pg_snapshots 0. │ │ ├─pg_stat 0. │ │ ├─pg_stat_tmp 0. │ │ ├─pg_subtrans 0. │ │ ├─pg_tblspc 0. │ │ ├─pg_twophase 0. │ │ ├─pg_wal 0. │ │ │ └─archive_status 0. │ │ └─pg_xact 0. │ └─react_app 0. │ ├─migrations 0. │ └─templates 0. │ └─main 0. └─frontend 0. └─front 0. ├─node_modules 0. ├─public 0. └─src
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。