Skip to content

Instantly share code, notes, and snippets.

@marteinn
Last active October 13, 2024 21:42
Show Gist options
  • Save marteinn/a9c7807b83c4c8c3ee95fbdf361be60a to your computer and use it in GitHub Desktop.
Save marteinn/a9c7807b83c4c8c3ee95fbdf361be60a to your computer and use it in GitHub Desktop.
This is a Phoenix + React-Create-App integration with very small footprint
  1. Begin with scaffolding a create-react-app, then update your package.json build script (replace DIR_TO_PHX_APP with the path to your phoenix app)
"build": "react-scripts build && rm -rf DIR_TO_PHX_APP/priv/static/build && mv build DIR_TO_PHX_APP/priv/static/build",

This will move your prod build files to DIR_TO_PHX_APP/priv/static/build on build

  1. Run npm run build

  2. Time for some Elixir, first add a new function called pwa and disable the layout in lib/your_app_web/controllers/page_controller.ex.

defmodule YourAppWeb.PageController do
  use YourAppWeb, :controller

  # Disable layout for pwa
  plug :put_layout, false when action in [:pwa]

  def index(conn, _params) do
    render(conn, "index.html")
  end

  # The action that will serve the react app
  def pwa(conn, _params) do
    render(conn, "pwa.html")
  end
end
  1. Open lib/your_app_web/views/page_view.ex and add this function.
def render("pwa.html", _assigns) do
  Path.join(:code.priv_dir(:your_app), "static/build/index.html")
  |> File.read!()
  |> raw()
end
  1. Add these two plugs in src/lib/your_app_web/endpoint.ex
plug(
  Plug.Static,
  at: "/",
  from: {:your_app, "priv/static/build"},
  gzip: false,
  only: ~w(asset-manifest.json favicon.ico manifest.json service-worker.js)
)

plug(
  Plug.Static,
  at: "/static",
  from: {:your_app, "priv/static/build/static"},
  gzip: false
)
  1. Finally update your index route in src/lib/your_app_web/router.ex with your new pwa action
scope "/", YourAppWeb do
  pipe_through(:browser)

  # Original route
  # get("/", PageController, :index)
  
  # The new react driven route
  get("/", PageController, :pwa)
end
  1. Done!
@ray-sh
Copy link

ray-sh commented Dec 23, 2019

This is the simplest way I found in the web. Thanks very much!
Just a little issue, the build script should be mv build DIR_TO_PHX_APP/priv/static/build

@marteinn
Copy link
Author

@ray-sh Awesome! Thanks for the feedback, I just updated the gist.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment