Serving my externally developed React application from within my Phoenix app

Phoenix Forum Questions / Help
,
1

I have a react application that I developed in a separate project.

When I am building my Reactjs app i.e. yarn run build I have a script that will take the /build folder and dump it into my phoenix application.

My phoenix application has a ReactController that will server the React application.
My question is, given the below /build folder that I have from my React application, how should I go about serving my static files correct?

51%20PM

So my ReactController will have an action that will load the index.html file below.
The index.html currently is referencing the /static folder like this:

src="/static/js/1.75c8aa5b.chunk.js"

I believe these files should be in my /assets folder.

What is the best way to go about doing something like this, just want to make sure I am not missing anything.

2

If you place your files in the assets folder then you will need to move them from that folder to the site that Phoenix builds when it puts together its web site. Accomplishing this would be done through Webpack in in Phoenix 1.4. I would use something like the CopyWebpackPlugin to copy the react application source into the site being built.

By default, static files are served by Phoenix using Plug.Static. The default product will configure this plug in your application’s endpoint in endpoint.ex in your project. In one application I have, for example, that configuration looks like this:

  # Serve at "/" the static files from "priv/static" directory.
  #
  # You should set gzip to true if you are running phoenix.digest
  # when deploying your static files in production.
  plug(Plug.Static,
    at: "/",
    from: :plugin_registry,
    gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt)
  )
1 Like