Need help building Blog Using Phoenix + GatsbyJS

Phoenix Forum Questions / Help
,
1

Background:

Objective:

  • I am interested in building a blog site using GatsbyJS and Phoenix and I was wondering if anyone can point me in the right direction to go about starting the project.
1 Like
2

Assuming you put gatsby in a folder called client in the root of your elixir app, something like the below may get you started.

in mix.exs (got the compile assets idea from https://github.com/bitwalker/distillery-aws-example/blob/master/mix.exs):

  • add dep: {:plug_static_index_html, “~> 1.0”},
  • then under aliases:
  defp aliases do
    [
      "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
      "ecto.reset": ["ecto.drop", "ecto.setup"],
      test: ["ecto.create --quiet", "ecto.migrate", "test"],
      compile: ["compile", &compile_assets/1],
      clean: ["clean", &clean_assets/1]
    ]
  end

  defp compile_assets(_args) do
    unless File.exists?(Path.join(System.cwd(), "priv/static")) do
      prod =
        if Mix.env() == :prod do
          "true"
        else
          "false"
        end

      IO.puts("compiling client app with yarn")
      System.cmd("yarn", ["run", "export"], cd: "client", env: [{"PROD", prod}])
    end
  end

  defp clean_assets(_args) do
    static_dir = Path.join(System.cwd(), "priv/static")
    IO.puts("removing static dir")
    IO.puts(static_dir)
    File.rm_rf!(static_dir)
  end

in endpoint.ex

plug Plug.Static.IndexHtml,
    at: "/"

  plug(
    Plug.Static,
    at: "/",
    from: {:yourappname, "priv/static"},
    gzip: true
  )

/client/package.json:

"scripts": {
   "export": "yarn run build && gatsby export -o ../priv/static"
}

The above script for package.json is probably not accurate for gatsby. But you will want a script called ‘export’ or something similar to compile gatsby, and tell it the directory to compile to.

then you could run:

mix clean
mix compile
mix phx.digest
mix phx.server

You will not have hot code reloading (you’d need to run gatsby in dev mode for that).
But gatsby’s index.html file should be served from localhost:4000/

Not 100% if the above will work as is, but it may start you off. I’m doing something similar for next.js

3 Likes
3

I be honest with @gdub01, I am not exactly following what you said. Is there any tutorial/guide which you used to setup?

4

Peter Corey has a great tutorial for create react app: http://www.petecorey.com/blog/2017/04/03/using-create-react-app-with-phoenix/

5

Wow! This is what I was looking for, thank you @gdub01. However, instead React I am going to try Gatsby. Let’s see how that goes.

1 Like
6

Hi @venomnert - did you make any progress you could share, with the rest of us? Thank you!

7

Hey Florin,

I have put the blog project on a hold at the moment. However, for the current project I am working I did have to implement React with Phoenix and I came across this create tutorial: https://medium.com/@resir014/a-phoenix-react-initial-setup-that-actually-works-c943e48f1e9e.

Hope that helps :grinning:

1 Like
8

Thank you for replying,@venomnert - yes, I know that article but I am trying to achieve something else; to not needing to support assets at all, from the phx app’s perspective, but w/o losing the live code/html (code/live reloader) abilities, during the development. I managed to bake a solution that’s close to what I want, but I got lost into making gatsby work with webpack 
 which tbh probably is not needed, but I am bad at JS (on purpose - lost my interest in it after jquery stopped to be the thing :wink: ), so I wouldn’t know, hence looking for examples, code samples etc. I’ll update this thread once I am getting closer to what I want. Thanks again!

9

Sounds good, and I will do the same :+1:

10

Hi, @venomnert! I’ve made a tutorial that does exactly what you’re talking about.

The basic approach I used was:

  • Create a new Phoenix app
  • Create a new Gatsby project from their hello-world starter inside the assets directory of the Phoenix project
  • Set up a symbolic link assets/static directory to Gastby’s public directory
  • Update endpoint.ex and add that new linked directory to the whitelist for Plug.Static

You can find the whole tutorial here.

3 Likes