Setup React root node.

pull/1/head
Joshua Potter 2023-12-01 12:56:14 -07:00
parent b832abddc7
commit 01ffd518f2
15 changed files with 94 additions and 16 deletions

9
assets/js/react/App.jsx Normal file
View File

@ -0,0 +1,9 @@
import * as React from 'react'
export default function App() {
return (
<div>
Hello React!
</div>
)
}

7
assets/js/react/main.jsx Normal file
View File

@ -0,0 +1,7 @@
import * as React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('mount')).render(<App />)

6
assets/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}

49
assets/pnpm-lock.yaml Normal file
View File

@ -0,0 +1,49 @@
lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies:
react:
specifier: ^18.2.0
version: 18.2.0
react-dom:
specifier: ^18.2.0
version: 18.2.0(react@18.2.0)
packages:
/js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
dev: false
/loose-envify@1.4.0:
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
hasBin: true
dependencies:
js-tokens: 4.0.0
dev: false
/react-dom@18.2.0(react@18.2.0):
resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
peerDependencies:
react: ^18.2.0
dependencies:
loose-envify: 1.4.0
react: 18.2.0
scheduler: 0.23.0
dev: false
/react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
dependencies:
loose-envify: 1.4.0
dev: false
/scheduler@0.23.0:
resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
dependencies:
loose-envify: 1.4.0
dev: false

View File

@ -37,7 +37,7 @@ config :esbuild,
version: "0.17.11", version: "0.17.11",
default: [ default: [
args: args:
~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*), ~w(js/app.js js/react/main.jsx --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
cd: Path.expand("../assets", __DIR__), cd: Path.expand("../assets", __DIR__),
env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)} env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
] ]

View File

@ -56,7 +56,7 @@ config :boardwise, BoardWiseWeb.Endpoint,
config :boardwise, BoardWiseWeb.Endpoint, config :boardwise, BoardWiseWeb.Endpoint,
live_reload: [ live_reload: [
patterns: [ patterns: [
~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg|ico)$", ~r"priv/static/.*(js|jsx|ts|tsx|css|png|jpeg|jpg|gif|svg|ico)$",
~r"priv/gettext/.*(po)$", ~r"priv/gettext/.*(po)$",
~r"lib/boardwise_web/(controllers|live|components)/.*(ex|heex)$" ~r"lib/boardwise_web/(controllers|live|components)/.*(ex|heex)$"
] ]

View File

@ -44,6 +44,7 @@
] ++ (with pkgs; [ ] ++ (with pkgs; [
inotify-tools # For file watching in development. inotify-tools # For file watching in development.
mix2nix mix2nix
nodePackages.pnpm
postgresql_15 postgresql_15
]); ]);
shellHook = '' shellHook = ''

View File

@ -15,6 +15,8 @@
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} /> <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}> <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script> </script>
<script defer type="text/javascript" src={~p"/assets/react/main.js"}>
</script>
</head> </head>
<body class="bg-white antialiased"> <body class="bg-white antialiased">
<%= @inner_content %> <%= @inner_content %>

View File

@ -0,0 +1,11 @@
defmodule BoardWiseWeb.ReactController do
use BoardWiseWeb, :controller
def index(conn, _params) do
# Set `layout` to false to bypass the app layout. The goal here is to
# eventually migrate away from the React app as is defined in favor of
# Phoenix related components. Exposing this mount point is the first step
# in migrating away from Vercel into a self-hosted solution.
render(conn, :index, layout: false)
end
end

View File

@ -0,0 +1,5 @@
defmodule BoardWiseWeb.ReactHTML do
use BoardWiseWeb, :html
embed_templates "react_html/*"
end

View File

@ -0,0 +1 @@
<div id="mount"></div>

View File

@ -1,7 +0,0 @@
defmodule BoardWiseWeb.SearchController do
use BoardWiseWeb, :controller
def index(conn, _params) do
render(conn, :index, layout: false)
end
end

View File

@ -1,5 +0,0 @@
defmodule BoardWiseWeb.SearchHTML do
use BoardWiseWeb, :html
embed_templates "search_html/*"
end

View File

@ -1 +0,0 @@
<.flash_group flash={@flash} />

View File

@ -17,7 +17,7 @@ defmodule BoardWiseWeb.Router do
scope "/", BoardWiseWeb do scope "/", BoardWiseWeb do
pipe_through :browser pipe_through :browser
get "/", SearchController, :index get "/", ReactController, :index
end end
# Other scopes may use custom stacks. # Other scopes may use custom stacks.