From 01ffd518f2ade8b67d745e4a30be7b245f57fa84 Mon Sep 17 00:00:00 2001 From: Joshua Potter Date: Fri, 1 Dec 2023 12:56:14 -0700 Subject: [PATCH] Setup React root node. --- assets/js/react/App.jsx | 9 ++++ assets/js/react/main.jsx | 7 +++ assets/package.json | 6 +++ assets/pnpm-lock.yaml | 49 +++++++++++++++++++ config/config.exs | 2 +- config/dev.exs | 2 +- flake.nix | 1 + .../components/layouts/root.html.heex | 2 + .../controllers/react_controller.ex | 11 +++++ lib/boardwise_web/controllers/react_html.ex | 5 ++ .../controllers/react_html/index.html.heex | 1 + .../controllers/search_controller.ex | 7 --- lib/boardwise_web/controllers/search_html.ex | 5 -- .../controllers/search_html/index.html.heex | 1 - lib/boardwise_web/router.ex | 2 +- 15 files changed, 94 insertions(+), 16 deletions(-) create mode 100644 assets/js/react/App.jsx create mode 100644 assets/js/react/main.jsx create mode 100644 assets/package.json create mode 100644 assets/pnpm-lock.yaml create mode 100644 lib/boardwise_web/controllers/react_controller.ex create mode 100644 lib/boardwise_web/controllers/react_html.ex create mode 100644 lib/boardwise_web/controllers/react_html/index.html.heex delete mode 100644 lib/boardwise_web/controllers/search_controller.ex delete mode 100644 lib/boardwise_web/controllers/search_html.ex delete mode 100644 lib/boardwise_web/controllers/search_html/index.html.heex diff --git a/assets/js/react/App.jsx b/assets/js/react/App.jsx new file mode 100644 index 0000000..4a050bc --- /dev/null +++ b/assets/js/react/App.jsx @@ -0,0 +1,9 @@ +import * as React from 'react' + +export default function App() { + return ( +
+ Hello React! +
+ ) +} diff --git a/assets/js/react/main.jsx b/assets/js/react/main.jsx new file mode 100644 index 0000000..2cd2522 --- /dev/null +++ b/assets/js/react/main.jsx @@ -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() + diff --git a/assets/package.json b/assets/package.json new file mode 100644 index 0000000..b423313 --- /dev/null +++ b/assets/package.json @@ -0,0 +1,6 @@ +{ + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } +} diff --git a/assets/pnpm-lock.yaml b/assets/pnpm-lock.yaml new file mode 100644 index 0000000..45f6600 --- /dev/null +++ b/assets/pnpm-lock.yaml @@ -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 diff --git a/config/config.exs b/config/config.exs index 303f624..161a6a1 100644 --- a/config/config.exs +++ b/config/config.exs @@ -37,7 +37,7 @@ config :esbuild, version: "0.17.11", default: [ 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__), env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)} ] diff --git a/config/dev.exs b/config/dev.exs index f31fa7e..f8ab870 100644 --- a/config/dev.exs +++ b/config/dev.exs @@ -56,7 +56,7 @@ config :boardwise, BoardWiseWeb.Endpoint, config :boardwise, BoardWiseWeb.Endpoint, live_reload: [ 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"lib/boardwise_web/(controllers|live|components)/.*(ex|heex)$" ] diff --git a/flake.nix b/flake.nix index 50862e8..08c6605 100644 --- a/flake.nix +++ b/flake.nix @@ -44,6 +44,7 @@ ] ++ (with pkgs; [ inotify-tools # For file watching in development. mix2nix + nodePackages.pnpm postgresql_15 ]); shellHook = '' diff --git a/lib/boardwise_web/components/layouts/root.html.heex b/lib/boardwise_web/components/layouts/root.html.heex index d1d3db7..f9bd3e7 100644 --- a/lib/boardwise_web/components/layouts/root.html.heex +++ b/lib/boardwise_web/components/layouts/root.html.heex @@ -15,6 +15,8 @@ + <%= @inner_content %> diff --git a/lib/boardwise_web/controllers/react_controller.ex b/lib/boardwise_web/controllers/react_controller.ex new file mode 100644 index 0000000..6681290 --- /dev/null +++ b/lib/boardwise_web/controllers/react_controller.ex @@ -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 diff --git a/lib/boardwise_web/controllers/react_html.ex b/lib/boardwise_web/controllers/react_html.ex new file mode 100644 index 0000000..fad6d41 --- /dev/null +++ b/lib/boardwise_web/controllers/react_html.ex @@ -0,0 +1,5 @@ +defmodule BoardWiseWeb.ReactHTML do + use BoardWiseWeb, :html + + embed_templates "react_html/*" +end diff --git a/lib/boardwise_web/controllers/react_html/index.html.heex b/lib/boardwise_web/controllers/react_html/index.html.heex new file mode 100644 index 0000000..639330b --- /dev/null +++ b/lib/boardwise_web/controllers/react_html/index.html.heex @@ -0,0 +1 @@ +
diff --git a/lib/boardwise_web/controllers/search_controller.ex b/lib/boardwise_web/controllers/search_controller.ex deleted file mode 100644 index 759a98a..0000000 --- a/lib/boardwise_web/controllers/search_controller.ex +++ /dev/null @@ -1,7 +0,0 @@ -defmodule BoardWiseWeb.SearchController do - use BoardWiseWeb, :controller - - def index(conn, _params) do - render(conn, :index, layout: false) - end -end diff --git a/lib/boardwise_web/controllers/search_html.ex b/lib/boardwise_web/controllers/search_html.ex deleted file mode 100644 index a2b772c..0000000 --- a/lib/boardwise_web/controllers/search_html.ex +++ /dev/null @@ -1,5 +0,0 @@ -defmodule BoardWiseWeb.SearchHTML do - use BoardWiseWeb, :html - - embed_templates "search_html/*" -end diff --git a/lib/boardwise_web/controllers/search_html/index.html.heex b/lib/boardwise_web/controllers/search_html/index.html.heex deleted file mode 100644 index 637ed6e..0000000 --- a/lib/boardwise_web/controllers/search_html/index.html.heex +++ /dev/null @@ -1 +0,0 @@ -<.flash_group flash={@flash} /> diff --git a/lib/boardwise_web/router.ex b/lib/boardwise_web/router.ex index a54f021..3932d37 100644 --- a/lib/boardwise_web/router.ex +++ b/lib/boardwise_web/router.ex @@ -17,7 +17,7 @@ defmodule BoardWiseWeb.Router do scope "/", BoardWiseWeb do pipe_through :browser - get "/", SearchController, :index + get "/", ReactController, :index end # Other scopes may use custom stacks.