{"id":15547984,"url":"https://github.com/resir014/phoenix_react_playground","last_synced_at":"2025-07-30T23:35:00.950Z","repository":{"id":75705959,"uuid":"98849553","full_name":"resir014/phoenix_react_playground","owner":"resir014","description":"An example setup for a Phoenix+React project with sensible defaults.","archived":false,"fork":false,"pushed_at":"2019-01-19T05:41:11.000Z","size":360,"stargazers_count":81,"open_issues_count":0,"forks_count":17,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-30T07:36:38.799Z","etag":null,"topics":["database","phoenix","react","starter-kit","starter-template","typescript"],"latest_commit_sha":null,"homepage":null,"language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/resir014.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-31T04:58:43.000Z","updated_at":"2023-09-01T08:47:10.000Z","dependencies_parsed_at":"2023-06-07T10:30:23.289Z","dependency_job_id":null,"html_url":"https://github.com/resir014/phoenix_react_playground","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/resir014/phoenix_react_playground","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/resir014%2Fphoenix_react_playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/resir014%2Fphoenix_react_playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/resir014%2Fphoenix_react_playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/resir014%2Fphoenix_react_playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/resir014","download_url":"https://codeload.github.com/resir014/phoenix_react_playground/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/resir014%2Fphoenix_react_playground/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267960848,"owners_count":24172508,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-30T02:00:09.044Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["database","phoenix","react","starter-kit","starter-template","typescript"],"created_at":"2024-10-02T13:14:31.924Z","updated_at":"2025-07-30T23:35:00.925Z","avatar_url":"https://github.com/resir014.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Phoenix+React Playground\n\n\u003e A sample Phoenix+React project that *actually works*.\n\nThis repo is originally made as a supplement to [this guide](https://resir014.github.io/blog/2017/08/09/a-phoenix-react-initial-setup-that-actually-works/). 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.\n\n## A quick note\n\nPhoenix 1.4 ships with [Webpack](https://webpack.js.org/) 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](https://github.com/resir014/phoenix_react_playground) has also been updated.\n\n## What's in the ~~box~~ repo\n\nThis repo contains a [Phoenix](http://www.phoenixframework.org/) app hooked up to a React frontend, which includes a basic example of your typical React app.\n\nBundling is done with [webpack 4](https://webpack.js.org/). 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.\n\n[Yarn](https://yarnpkg.com/en/) 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.\n\nInstead of plain JavaScript, we're going to use [TypeScript](https://www.typescriptlang.org). TypeScript is a superset of JavaScript which adds additional static typing, which is really helpful for [detecting bugs during compile time](https://blog.acolyer.org/2017/09/19/to-type-or-not-to-type-quantifying-detectable-bugs-in-javascript/).\n\n## Requirements\n\n* [Node.js](https://nodejs.org/en) (v8+)\n* [Elixir](https://elixir-lang.org/install.html) (v1.6+)\n* [Yarn](https://yarnpkg.com/en/docs/install) - optional. You can use `npm` if you want, but it's for your own sanity.\n\n## Getting started\n\nTo install dependencies and configure your project:\n\n* Install Elixir dependencies with `mix deps.get`.\n* `cd` to the `assets/` directory and run `yarn` (or `npm install`) to install Node.js dependencies.\n* Modify the database settings in each `config/` files according to your needs.\n* 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)\n\nTo start your Phoenix server:\n\n* Start Phoenix endpoint with `mix phx.server`\n\nNow you can visit [`localhost:4000`](http://localhost:4000) from your browser.\n\nReady to run in production? Please [check out the deployment guides provided by Phoenix](http://www.phoenixframework.org/docs/deployment).\n\n## Learn more\n\n  * Official website: http://www.phoenixframework.org/\n  * Guides: http://phoenixframework.org/docs/overview\n  * Docs: https://hexdocs.pm/phoenix\n  * Mailing list: http://groups.google.com/group/phoenix-talk\n  * Source: https://github.com/phoenixframework/phoenix\n\n---\n\nHave fun! Feel free to [tweet at me](https://twitter.com/resir014) if you have any questions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fresir014%2Fphoenix_react_playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fresir014%2Fphoenix_react_playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fresir014%2Fphoenix_react_playground/lists"}