add django-vite settings

.gitignore

@@ -169,7 +169,7 @@ cython_debug/
 #  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
-#.idea/
+.idea/
 
 ### PyCharm+all ###
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider

.node-version

@@ -0,0 +1 @@
+20.10.0

config/settings.py

@@ -39,6 +39,8 @@
     'django.contrib.staticfiles',
 
     'rest_framework',
+    'corsheaders',
+    'django_vite',
 
     'api.apps.ApiConfig',
     'diary.apps.DiaryConfig',
@@ -47,6 +49,7 @@
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
@@ -59,7 +62,7 @@
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [],
+        'DIRS': [BASE_DIR / 'templates'],
         'APP_DIRS': True,
         'OPTIONS': {
             'context_processors': [
@@ -122,7 +125,24 @@
 
 STATIC_URL = 'static/'
 
+# django_viteの中で STATIC_ROOT を見に行く設定があるため、DEBUG=Trueであっても設定しておく
+# https://github.com/MrBin99/django-vite/blob/3.0.1/django_vite/core/asset_loader.py#L111
+STATIC_ROOT = BASE_DIR / 'staticfiles'
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+# for django-vite
+DJANGO_VITE = {
+    "default": {
+        "dev_mode": True
+    }
+}
+
+# for django-cors-headers
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:8000",
+    "http://localhost:5173",
+]

config/urls.py

@@ -15,9 +15,11 @@
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path, include
+from django.urls import path, include, re_path
+from django.views.generic import TemplateView
 
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('api/', include('api.urls')),
+    re_path('', TemplateView.as_view(template_name='index.html')),
 ]

frontend/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/src/components/pages/Index.tsx

@@ -0,0 +1,5 @@
+export const Index = () => {
+  return (
+    <p>hello</p>
+  )
+}

frontend/src/main.tsx

@@ -0,0 +1,33 @@
+import React, {StrictMode} from 'react'
+import ReactDOM from 'react-dom/client'
+import 'vite/modulepreload-polyfill'; // required for vite entrypoints
+import {Outlet, RootRoute, Route, Router, RouterProvider} from "@tanstack/react-router";
+import {TanStackRouterDevtools} from '@tanstack/router-devtools'
+import {Index} from "./components/pages/Index";
+
+const rootRoute = new RootRoute(
+  {
+    component: () => (
+      <>
+        <h1>Diary</h1>
+        <Outlet />
+        <TanStackRouterDevtools />
+      </>
+    )
+  }
+)
+
+const indexRoot = new Route({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: Index
+})
+
+const routeTree = rootRoute.addChildren([indexRoot])
+const router = new Router({ routeTree })
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+)

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />