![]() ![]() setup the database, you can follow the blog and "psql" into the Postgres container or add an "init.db" with a mount bind to Postgres' "/docker-entrypoint-initdb.d/init.sh" file.The keys below should be passed as ARG to the second stage of the Dockerfile and set in an ".env" file for the Dockerfile We can use a boilerplate for an Alpine (almost) production ready image from this author. Postgres (alpine - 207MB) and Caddy (44MB) already use a built image. Note that only url: needs to set/kept in "". We can remove the WS ref here when you change the WS uri in the constructor to :80 page_path ( conn, :index )) |> halt () end endĮnter fullscreen mode Exit fullscreen mode has_key? ( get_session ( conn ), "user_token" ) do true -> % " ) |> redirect ( to: Routes. Use PhoenixReactWeb, :controller "./priv/static/react/" " React \n " defp read_line (, token ), do : token defp read_line ( curr, _ ), do : curr def index ( conn, _params ) do case Map. We also added another counter to experiment WS: the sum of the total number of clicks from any user this counter will be managed by Phoenix with a GenServer who broadcasts back to the SPA through a channel to get realtime updates. The main component is a simple counter (from the Vite/React boilerplate). From this page, you can navigate to the SPA. We use a React/ Vite boilerplate and add a Github login - borrowed from dwyl - to the landing page. The idea here is to experiment Phoenix rendering React. ![]() adapt the documentation to pass signed tokens from Phoenix to React to authenticate the WS.use the channel topic to communicate between a GenServer and a channel,.It means the internal states of the React components are lost, thus any meaningful state must be kept in the Phoenix app. The transition back and forth from SPA to SSR is a full page reload. This kind of app can benefit from using a reverse proxy to serve the SPA (or a CDN). ![]() The SPA may communicate with the Elixir/Phoenix app through authenticated WSS or HTTP requests. Then we want navigate back and forth to a fully functional and authenticated SPA (which can be anything, even with Javascript for native mobile rendering). We want Phoenix to serve the landing page, thus provide a fast and SEO meaningful page. We are interested in running a React SPA as part of a Phoenix app. Petal Pro also has modified versions of both the and scaffold commands to save you even more time.React components are added easily to any Phoenix page or LiveView component with so-called hooks in the LiveSocket object. Now if you want to save even more development time there’s a paid version of Petal, which helps support the continued development of Petal Components and comes with some pretty great features like authentication, social logins, layouts, and HTML email components all built-in. With very little effort we were able to get our app updated to use Tailwind and Petal Components. Let’s go back to the browser and our form modal looks a lot better. Template path: lib/teacher_web/live/album_live/form_ We’ll go to the form_ template and it’s already using a form component, so we’ll just need to update it to use the form_field and button components. Now let’s go back to the browser and great we see our changes! Our app looks a lot better! But if we edit an album, the modal works, but the form could look a lot better. Because Petal Components use Tailwind CSS, we’ll add the tailwind package, setting the runtime to development. Then we’ll open our Mixfile and add it as a dependency. We’ll go to Hex and grab the latest version of petal_components. Instead, we’ll update this Phoenix LiveView project to use Petal Components. However, in this episode, we won’t be starting a new project. It comes pre-installed with Tailwind CSS, Alpine JS, as well as the Petal Components Library. If you’re starting a new Phoenix application and want to get started quickly with the PETAL stack using Petal Components, I’d suggest taking a look at the Petal Boilerplate project here. In this episode, we’ll get an introduction to Petal Components. Written in HEEX and styled with Tailwind, Petal Components make it easy to build beautiful web applications by providing pre-built components you can easily drop into your application and customize. And Petal Components is an open source component library that supercharges this stack. The word ‘Petal’ in the relatively new Petal Stack, is an acronym that stands for Phoenix - Elixir - Tailwind CSS - Alpine.js - and LiveView. Follow along with the episode starter on GitHub ![]()
0 Comments
Leave a Reply. |