Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Phoenix+React Playground

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 box repo

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.

Instead of plain JavaScript, we're going to use TypeScript. TypeScript is a superset of JavaScript which adds additional static typing, which is really helpful for detecting bugs during compile time.

Requirements

  • Node.js (v8+)
  • Elixir (v1.6+)
  • Yarn - optional. You can use npm if you want, but it's for your own sanity.

Getting started

To install dependencies and configure your project:

  • Install Elixir dependencies with mix deps.get.
  • cd to the assets/ directory and run yarn (or 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 ecto.create, mix ecto.migrate and mix run priv/repo/seeds.exs in order)

To start your Phoenix server:

  • Start Phoenix endpoint with mix phx.server

Now you can visit localhost:4000 from your browser.

Ready to run in production? Please check out the deployment guides provided by Phoenix.

Learn more


Have fun! Feel free to tweet at me if you have any questions.

About

An example setup for a Phoenix+React project with sensible defaults.

Topics

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.