https://github.com/ndrean/phoenix_react
Phoenix API & landing page with React SPA
https://github.com/ndrean/phoenix_react
elixir phoenix react vite websocket
Last synced: about 1 month ago
JSON representation
Phoenix API & landing page with React SPA
- Host: GitHub
- URL: https://github.com/ndrean/phoenix_react
- Owner: ndrean
- Created: 2022-09-01T14:07:55.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-09-09T10:32:24.000Z (almost 4 years ago)
- Last Synced: 2025-02-06T06:46:06.693Z (over 1 year ago)
- Topics: elixir, phoenix, react, vite, websocket
- Language: Elixir
- Homepage:
- Size: 566 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PhoenixReact
npm create vite@latest front -- --template react
mix phx.gen.secret
MIX "dotenv": just put secrets in ".env" and it works :)
export SECRET_KEY_BASE=B41pUFgfTJeEUpt+6TwSkbrxlAb9uibgIemaYbm1Oq+XdZ3Q96LcaW9sarbGfMhy
export DATABASE_URL=ecto://postgres:postgres@localhost/phoenix_react_dev
PHX_HOST=4000
PHX_SERVER=true
mix deps.get --only prod
MIX_ENV=prod mix compile
mix webapp
MIX_ENV=prod mix assets.deploy
MIX_ENV=prod mix release
PHX_SERVER=true PHX_PORT=4000 PHX_HOST=localhost \_build/prod/rel/phoenix_react/bin/phoenix_react start
## Test Websocket
In terminal:
```bash
$ wscat -c 'ws://localhost:4000/socket/websocket?vsn=2.0.0&test=1'
The server listen and responds:
info] CONNECTED TO PhoenixReactWeb.UserSocket in 1ms
Transport: :websocket
Serializer: Phoenix.Socket.V2.JSONSerializer
Parameters: %{"test" => "1", "vsn" => "2.0.0"}
```
We add signed token verification with `Phoenix.Token`:
```bash
iex> Phoenix.Token.sign(PhoenixReactWeb.Endpoint, "user token", "Neven Drean")
"sfkmskfsmfksmldfk"
```
With a bad token:
```bash
$ wscat -c 'ws://localhost:4000/socket/websocket?vsn=2.0.0&token=x'
[error] Elixir.PhoenixReactWeb.UserSocket connect error :invalid
[info] REFUSED CONNECTION TO PhoenixReactWeb.UserSocket in 3ms
```
With the good token:
```bash
$ wscat -c 'ws://localhost:4000/socket/websocket?vsn=2.0.0&token=sfkmskfsmfksmldf'
[info] CONNECTED TO PhoenixReactWeb.UserSocket in 657µs
Transport: :websocket
Serializer: Phoenix.Socket.V2.JSONSerializer
Parameters: %{"token" => "sfkmskfsmfksmldf"
> ["1","1","counter:lobby","phx_join",{}]
< ["1","1","counter:lobby","phx_reply",{"response":{},"status":"ok"}]
< [null,null,"counter:lobby","shout",{"count":12}]
```
- Alternative with JWT is [Joken](https://github.com/joken-elixir/joken)
## Compression:
- config endpoint http:[comporess: true]
- Plug.Static, gzip: Mix.evn == :prod
## Black hole
`du -hc -s node_modules`
## Github pages CDN