### Clone and Navigate Live React Examples

Source: https://github.com/mrdotb/live_react/blob/main/guides/development.md

Clone the live_react repository from GitHub and navigate into the examples directory to start development.

```bash
git clone https://github.com/mrdotb/live_react.git
cd live_react_examples
```

--------------------------------

### Elixir Phoenix Server Setup and Start

Source: https://github.com/mrdotb/live_react/blob/main/live_react_examples/README.md

Commands to install dependencies, set up the database, and start the Phoenix server for the LiveReactExamples project. These are essential steps for running the application locally.

```bash
mix setup
# Installs and sets up dependencies, including database setup if configured.
```

```bash
mix phx.server
# Starts the Phoenix endpoint server.
```

```bash
iex -S mix phx.server
# Starts the Phoenix endpoint server within an interactive Elixir shell (IEx).
```

--------------------------------

### Run LiveReact Setup Commands

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Executes the necessary terminal commands to fetch Elixir dependencies, run the LiveReact setup task which generates initial project files, and install JavaScript dependencies for the assets directory.

```Bash
mix deps.get
mix live_react.setup
npm install --prefix assets
```

--------------------------------

### Install Runtime Dependencies

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Installs core React runtime dependencies along with Phoenix-related libraries and topbar for the project.

```bash
npm install --save react react-dom topbar ../deps/live_react ../deps/phoenix ../deps/phoenix_html ../deps/phoenix_live_view
```

--------------------------------

### Install Vite and React Plugin for Assets

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Provides instructions to install Vite and its React plugin as development dependencies within the `assets` directory. These packages are essential for LiveReact's asset bundling and development server capabilities.

```Bash
cd assets

# vite
npm install -D vite @vitejs/plugin-react
```

--------------------------------

### Configure LiveReact for Development (dev.exs)

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Configure LiveReact for the development environment by specifying the Vite host, the SSR module to use, and enabling SSR. This setup ensures a smooth development workflow with Vite's hot-reloading capabilities.

```elixir
config :live_react,
  vite_host: "http://localhost:5173",
  ssr_module: LiveReact.SSR.ViteJS,
  ssr: true
```

--------------------------------

### Install Tailwind CSS Dependencies

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Installs the necessary Tailwind CSS plugins for PostCSS and Vite integration as development dependencies.

```bash
npm install -D @tailwindcss/forms @tailwindcss/postcss @tailwindcss/vite
```

--------------------------------

### Package.json Scripts Configuration

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Defines private, type, and script configurations for the project, including development, build, and server build commands using Vite.

```json
{
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --host -l warn",
    "build": "tsc && vite build",
    "build-server": "tsc && vite build --ssr js/server.js --out-dir ../priv/react-components --minify esbuild && echo '{\"type\": \"module\" } ' > ../priv/react-components/package.json"
  }
}
```

--------------------------------

### Install TypeScript Dependencies

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Installs TypeScript and its associated types for React and React DOM as development dependencies.

```bash
npm install -D typescript @types/react @types/react-dom
```

--------------------------------

### Configure LiveSocket with LiveReact Hooks

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Modifies the `assets/js/app.js` file to import `getHooks` from `live_react` and `components` from the local `react-components` directory. These hooks are then merged into the `LiveSocket` configuration, enabling LiveReact's integration with Phoenix LiveView.

```JavaScript
...
import topbar from "topbar" // instead of ../vendor/topbar
import { getHooks } from  "live_react";
import components from "../react-components";
import "../css/app.css" // the css file is handled by vite

const hooks = {
  // ... your other hooks
  ...getHooks(components),
};

...

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: hooks, // <- pass the hooks
  longPollFallbackMs: 2500,
  params: { _csrf_token: csrfToken },
});
...
```

--------------------------------

### Use Vite Assets in root.html.heex for Development

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Modifies `root.html.heex` to use the `LiveReact.Reload.vite_assets` wrapper. This helper ensures that Vite-managed assets (JavaScript and CSS) are correctly loaded during development, enabling hot module replacement and faster development cycles.

```HTML
<LiveReact.Reload.vite_assets assets={["/js/app.js", "/css/app.css"]}>
  <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
  <script type="module" phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
  </script>
</LiveReact.Reload.vite_assets>
```

--------------------------------

### Import LiveReact in Elixir HTML Helpers

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Adds the `LiveReact` import statement within the `html_helpers` macro in `lib/<app_name>_web.ex`. This makes LiveReact functions and components available for use in Phoenix templates.

```Elixir
defp html_helpers do
  quote do

    # ...

    import LiveReact # <-- Add this line

    # ...

  end
end
```

--------------------------------

### Add LiveReact Dependencies to mix.exs

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

This snippet shows how to add the `live_react` dependency to your `mix.exs` file. It also includes the `nodejs` dependency, which is required if you intend to use Server-Side Rendering (SSR) in production.

```elixir
def deps do
  [
    {:live_react, "~> 1.0.1"},
    {:nodejs, "~> 3.1.2"} # if you want to use SSR in production
  ]
end
```

--------------------------------

### Render React Components in LiveView Templates

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Demonstrates how to render a React component within a Phoenix LiveView or Dead View template using the `<.react>` component. It also shows how to use the built-in `Link` component for LiveView navigation.

```Elixir
<.react name="Simple" />
```

```HTML
<!-- Use Link component directly in templates -->
<.react name="Link" href="/some-page">External Link</.react>
<.react name="Link" patch="/current-liveview?tab=new">Patch Link</.react>
<.react name="Link" navigate="/other-liveview">Navigate Link</.react>
```

--------------------------------

### Remove Topbar from Vendor

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Removes the local topbar.js file from the vendor directory to use the version installed via npm.

```bash
rm vendor/topbar.js
```

--------------------------------

### Configure LiveReact for Production (prod.exs)

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Configure LiveReact for the production environment. This involves setting the appropriate SSR module, typically `LiveReact.SSR.NodeJS`, and deciding whether to enable or disable SSR based on your application's requirements.

```elixir
config :live_react,
  ssr_module: LiveReact.SSR.NodeJS,
  ssr: true # or false if you don't want SSR in production
```

--------------------------------

### Add NodeJS Supervisor for SSR in application.ex

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Integrates the `NodeJS.Supervisor` into the application's supervision tree in `application.ex`. This is required to enable Server-Side Rendering (SSR) with `LiveReact.SSR.NodeJS` in production environments, allowing React components to be rendered on the server.

```Elixir
children = [
  ...
  {NodeJS.Supervisor, [path: LiveReact.SSR.NodeJS.server_path(), pool_size: 4]},
  # note Adjust the pool_size depending of the machine
]
```

--------------------------------

### Update Watchers in config/dev.exs

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Modifies the `watchers` configuration in `config/dev.exs` to use `npm run dev` within the `assets` directory. This ensures that Vite's development server is properly monitored by Phoenix during development for live reloading.

```Elixir
config :my_app, MyAppWeb.Endpoint,
  # ...
  watchers: [
    npm: ["run", "dev", cd: Path.expand("../assets", __DIR__)]
  ]
```

--------------------------------

### Update mix.exs Aliases and Remove ESBuild/Tailwind Dependencies

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Adjusts the `mix.exs` file by updating asset-related aliases to use `npm` commands within the `assets` directory for building. It also removes the `esbuild` and `tailwind` dependencies, as LiveReact integrates with Vite for asset management.

```Elixir
defp aliases do
[
  setup: ["deps.get", "assets.setup", "assets.build"],
  "assets.setup": ["cmd --cd assets npm install"],
  "assets.build": [
    "cmd --cd assets npm run build",
    "cmd --cd assets npm run build-server"
  ],
  "assets.deploy": [
    "cmd --cd assets npm run build",
    "cmd --cd assets npm run build-server",
    "phx.digest"
  ]
]
end

defp deps do
  [
    # remove these lines, we don't need esbuild or tailwind here anymore
    # {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
    # {:tailwind, "~> 0.2", runtime: Mix.env() == :dev},
  ]
end
```

--------------------------------

### Enable Stateful Hot Reload for LiveViews in dev.exs

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Configures `config/dev.exs` to enable stateful hot reloading for Phoenix LiveViews. This involves adding a `notify` section to `live_reload` and adjusting `patterns` to exclude LiveView components, allowing for more granular and state-preserving reloads.

```Elixir
# Watch static and templates for browser reloading.
config :my_app, MyAppWeb.Endpoint,
  live_reload: [
    notify: [
      live_view: [
        ~r"lib/my_app_web/core_components.ex$",
        ~r"lib/my_app_web/(live|components)/.*(ex|heex)$"
      ]
    ],
    patterns: [
      ~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"lib/my_app_web/controllers/.*(ex|heex)$"
    ]
  ]
```

--------------------------------

### Start Node.js Supervisor in Application.ex

Source: https://github.com/mrdotb/live_react/blob/main/guides/ssr.md

Integrates the `NodeJS.Supervisor` into the application's supervision tree in `application.ex`. This ensures the Node.js worker is started and managed correctly, with a specified pool size for concurrent rendering tasks.

```elixir
def start(_type, _args) do
  children = [
    ...
    {NodeJS.Supervisor, [path: LiveReact.SSR.NodeJS.server_path(), pool_size: 4]},
  ]
end
```

--------------------------------

### Use LiveReact Link Component in React

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Illustrates how to import and use the `Link` component from `live_react` directly within React components. This component provides seamless integration with Phoenix LiveView's navigation capabilities, including traditional links, patching, and navigating.

```JavaScript
import { Link } from "live_react";

function MyComponent() {
  return (
    <div>
      <Link href="/external">Traditional Link</Link>
      <Link patch="/same-lv?param=value">Patch Current LiveView</Link>
      <Link navigate="/other-lv">Navigate to Other LiveView</Link>
      <Link navigate="/replace" replace={true}>Replace History</Link>
    </div>
  );
}
```

--------------------------------

### Configure Tailwind CSS Content for React Components

Source: https://github.com/mrdotb/live_react/blob/main/guides/installation.md

Updates the `content` array in `assets/tailwind.config.js` to include paths to React component files (JSX/TSX). This ensures that Tailwind CSS scans these files for utility classes and includes them in the final CSS bundle.

```JavaScript
content: [
  ...
    "./react-components/**/*.jsx", // <- if you are using jsx
    "./react-components/**/*.tsx" // <- if you are using tsx
],

```

--------------------------------

### Modify Dockerfile for Node.js and npm

Source: https://github.com/mrdotb/live_react/blob/main/guides/deployment.md

Modifies the generated Dockerfile to include `curl` for installing Node.js (version 19+) and adds a step to install npm dependencies within the assets directory. This ensures the application's frontend assets are built correctly during deployment.

```diff
# ./Dockerfile

...

# install build dependencies
- RUN apt-get update -y && apt-get install -y build-essential git \
+ RUN apt-get update -y && apt-get install -y build-essential git curl \
    && apt-get clean && rm -f /var/lib/apt/lists/*_*

+ # install nodejs for build stage
+ RUN curl -fsSL https://deb.nodesource.com/setup_19.x | bash - && apt-get install -y nodejs

...

COPY assets assets

+ # install all npm packages in assets directory
+ RUN cd /app/assets && npm install

...

# start a new build stage so that the final image will only contain
# the compiled release and other runtime necessities
FROM ${RUNNER_IMAGE}

RUN apt-get update -y && \
-  apt-get install -y libstdc++6 openssl libncurses5 locales ca-certificates \
+  apt-get install -y libstdc++6 openssl libncurses5 locales ca-certificates curl \
   && apt-get clean && rm -f /var/lib/apt/lists/*_*

+ # install nodejs for production environment
+ RUN curl -fsSL https://deb.nodesource.com/setup_19.x | bash - && apt-get install -y nodejs

...
```

--------------------------------

### Launch App with Fly.io CLI

Source: https://github.com/mrdotb/live_react/blob/main/guides/deployment.md

Launches the application on Fly.io using the `fly launch` command. This command initiates the deployment process and prompts the user to configure settings, such as database choices.

```bash
fly launch
```

--------------------------------

### Open Deployed App with Fly.io CLI

Source: https://github.com/mrdotb/live_react/blob/main/guides/deployment.md

Opens the deployed application in the default web browser using the `fly apps open` command. This is typically run after a successful deployment to verify the application is running correctly.

```bash
fly apps open
```

--------------------------------

### Generate Dockerfile with Phoenix

Source: https://github.com/mrdotb/live_react/blob/main/guides/deployment.md

Generates a Dockerfile for a Phoenix project using the `mix phx.gen.release --docker` command. This command prepares the project for containerized deployment by creating the necessary build and runtime configurations.

```bash
mix phx.gen.release --docker
```

--------------------------------

### Add Node.js Dependency to Mix File

Source: https://github.com/mrdotb/live_react/blob/main/guides/ssr.md

Configures the project's dependencies by adding the `nodejs` package to the `mix.exs` file. This is a prerequisite for enabling Server-Side Rendering (SSR).

```elixir
defp deps do
  [
    {:nodejs, "~> 3.1"},
    ...
  ]
end
```

--------------------------------

### Configure SSR Module and Enable in Prod.exs

Source: https://github.com/mrdotb/live_react/blob/main/guides/ssr.md

Sets the `ssr_module` to `LiveReact.SSR.NodeJS` and enables SSR by setting `ssr` to `true` in the `config/prod.exs` file. This configuration directs the application to use the Node.js-based SSR implementation.

```elixir
config :live_react,
  ssr_module: LiveReact.SSR.NodeJS,
  ssr: true
```

--------------------------------

### Robots.txt Directives

Source: https://github.com/mrdotb/live_react/blob/main/live_react_examples/priv/static/robots.txt

The robots.txt file uses specific directives to inform web crawlers which parts of a website they should not crawl. Key directives include User-agent to specify the crawler and Disallow to block access to paths. It's a standard for web crawling but not enforced by all bots.

```robots.txt
# See https://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file
#
# To ban all spiders from the entire site uncomment the next two lines:
# User-agent: *
# Disallow: /

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.