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.
A quick note
Phoenix 1.4 ships with Webpack by default, therefore making the setup much more straightforward than before. The long-overdue rewrite has been finished, and has also been made up-to-date following recent updates to Phoenix. The sample repo has also been updated.
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.