Phoenix Reactify

Phoenix Reactify is an amazing mix task capable of adding a simple React implementation to your fresh phoenix projects.

⚠ WARNING: Currently, because of some webpack version related issues, this library its only compatible with Phoenix 1.5.9 or any other that have webpack ~4.5 as peer-dependency.

How does PhoenixReactify works?

It uses the amazing remount library to make your entire SPA App into a html tag, so that you can use into your phoenix application's templates

Installation

My first idea was to release it as a mix archive, so that you could use it in any project, once installed, just like mix phx.new command. But since mix archives cannot bundle dependencies (and this project has), I had to release it in two different ways:

As a hex.pm package, that you can install like this, pasting this code into your mix.exs file:

def deps do
  [
    # other dependencies
    {:phoenix_reactify, "~> 0.0.3"}
  ]
end

Feel free to remove it from the dependencies once you've set up your project 😄

Or, at every release I put a binary-compiled file altogether, you can download it directly from the releases page, and then, run it inside your fresh phoenix project.

$ ./phoenix_reactify

Usage

At this moment, Phoenix Reactify supports these options:

-p, --project: Specifies the React project name (Default to SPA).
-v, --verbose: Ensures verbose output.
-t, --typescript: Enables Typescript support.

mix phx.reactify --typescript --project <PROJECT-NAME> --verbose

By default, the library already puts the first entrypoint tag to the default elixir first page template (lib/\<project-name>_web/templates/page/index.html.eex). But you can always create new tags and even multiple SPAs! If you want this kind of behaviour, please refer to Advanced Usage

With your default first tag set, just fire up localhost:4000 (default phoenix server port), and you should see that, if everything gone well:

PhoenixReactfyMainScreen

⚠ WARNING: be careful with route conflicts between the applications

ToDo

🕐 Automatic route mapping (probably via macros or something like that).
✅ Typescript support (deppends on babel).
✅ Auto-Inject first generated tag (not trully necessary, but I think it would be more user-friendly).

License

MIT