A sample Phoenix+React project that actually works.
This repo is originally made as a supplement to this guide. Feel free to use this as a base for your Phoenix+React project, however, everything would make sense if you read the original guide first, so probably go do that first. Don't worry, I'll wait.
The commit logs outline steps taken on the aforementioned guide, to make it easier to follow.
A quick note
This repo has undergone some substantial changes since I wrote the article mentioned above. I've started learning much about Elixir/Phoenix development, and so I've felt that a rewrite of this starter pack is long overdue.
Some changes include:
- upgraded to webpack 4 to make use of the brand-new optimisation strategies included out of the box, all with a smaller configuration file,
- moved all the frontend stuff back inside the
assets/directory; and also
- upgraded all dependencies to the latest version.
What's in the
This repo contains a Phoenix app hooked up to a React frontend, which includes a basic example of your typical React app.
Bundling is done with webpack 4. The webpack team have done a great job to improve optimisation efforts as well as reducing the amount of configuration time required in version 4.
Yarn is used as our package manager. It features a robust lockfile which ensures your dependencies are identical across different devices. This is optional, but I recommend it for your own sanity.
- Node.js (v8+)
- Elixir (v1.6+)
- Yarn - optional. You can use
npmif you want, but it's for your own sanity.
To install dependencies and configure your project:
- Install Elixir dependencies with
assets/directory and run
npm install) to install Node.js dependencies.
- Modify the database settings in each
config/files according to your needs.
- Create and migrate your database with
mix ecto.setup(this runs
mix run priv/repo/seeds.exsin order)
To start your Phoenix server:
- Start Phoenix endpoint with
Now you can visit
localhost:4000 from your browser.
Ready to run in production? Please check out the deployment guides provided by Phoenix.
- Official website: http://www.phoenixframework.org/
- Guides: http://phoenixframework.org/docs/overview
- Docs: https://hexdocs.pm/phoenix
- Mailing list: http://groups.google.com/group/phoenix-talk
- Source: https://github.com/phoenixframework/phoenix
Have fun! Feel free to tweet at me if you have any questions.