https://github.com/brunojppb/react-phoenix-ts
Phoenix Web app template with asset pipelines for React and TypeScript
https://github.com/brunojppb/react-phoenix-ts
elixir phoenix react typescript
Last synced: 8 months ago
JSON representation
Phoenix Web app template with asset pipelines for React and TypeScript
- Host: GitHub
- URL: https://github.com/brunojppb/react-phoenix-ts
- Owner: brunojppb
- Created: 2022-01-19T18:13:44.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-24T08:57:56.000Z (over 1 year ago)
- Last Synced: 2024-10-12T19:23:14.347Z (over 1 year ago)
- Topics: elixir, phoenix, react, typescript
- Language: Elixir
- Homepage: https://bpaulino.com/entries/modern-webapps-with-elixir-phoenix-typescript-react
- Size: 156 KB
- Stars: 52
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React 🤝 Phoenix 🤝 TypeScript
A [Phoenix framework](https://www.phoenixframework.org/) app with [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/) as its frontend.
> [!NOTE]
> **This repo is archived, but the philosophy here still stands. If you want to replicate this setup on any Web framework, [give my blogpost a read here](https://bpaulino.com/entries/modern-webapps-with-elixir-phoenix-typescript-react).**
## Phoenix Backend
* Install dependencies with `mix deps.get`
* Create and migrate your database with `mix ecto.setup`
* Start the Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
## React frontend
For developing the frontend:
* `cd` into the frontend directory
* Install all dependencies with `npm install`
* Start the dev server with `npm run dev`
Now you can visit [`localhost:3000`](http://localhost:3000) from your browser.
## Read More
To understand how the entire setup works, [read this detailed blogpost](https://bpaulino.com/entries/modern-webapps-with-elixir-phoenix-typescript-react) where I explain it in detail.
[](https://bpaulino.com/entries/modern-webapps-with-elixir-phoenix-typescript-react)