Modern Webapps with React, Phoenix, Elixir and TypeScript

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • SaaSHub - Software Alternatives and Reviews
  • axios

    Promise based HTTP client for the browser and node.js

    From now on, if you are making requests with axios for instance, you can safely make a request in your React component like this:

  • react-phoenix-ts

    Phoenix Web app template with asset pipelines for React and TypeScript

    You can find the repo with all the changes we made on this post here.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • Phoenix

    Peace of mind from prototype to production

    I've started working on a side project this year and the tech stack I have chosen was the Elixir lang due to its functional design and fault tolerance (Thanks to the Erlang VM) so the Phoenix framework was a natural choice for me.

  • vite

    Next generation frontend tooling. It's fast!

    import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], // Forward all requests made by our React frontend to `localhost:3000/api` // to our Phoenix backend running at `localhost:4000`. // This is only necessary during development. // In production, our Phoenix and React apps are served from the same // domain and port, which makes this configuration unecessary. server: { proxy: { '/api': { target: 'http://localhost:4000', secure: false, ws: true, }, } }, // using the `webapp` base path for production builds // So we can leverage Phoenix static assets plug to deliver // our React app directly from our final Elixir app, // Serving all files from the `priv/static/webapp` folder. // NOTE: Remember to move the frontend build files to the // `priv` folder during the application build process in CI // @ts-ignore base: process.env.NODE_ENV === 'production' ? '/webapp/' : '/', })

  • react-router

    Declarative routing for React

    So the strategy here is to leverage React Router on our React app for any route that is under /app and whenever the client makes the first request to our app, let's say they are visiting example.com/app for the first time, Phoenix will handle this initial request and serve the initial HTML together with our React app payload, so the React app can be mounted and take care of the routing from there.

  • React

    The library for web and native user interfaces.

    While Phoenix provides a very interesting programming model called LiveView, I wanted to stick with the frontend stack I'm most familiar with which is React. Besides using it heavily in my day job, I also really appreciate the ecosystem around it.

  • esbuild

    An extremely fast bundler for the web

    For our React frontend, I've chosen Vite to handle all the tooling for me. It has got all the sane defaults I need for a TypeScript project with React, plus it uses ESBuild which gives us blazing fast feedback during development.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  • Elixir

    Elixir is a dynamic, functional language for building scalable and maintainable applications

    I've started working on a side project this year and the tech stack I have chosen was the Elixir lang due to its functional design and fault tolerance (Thanks to the Erlang VM) so the Phoenix framework was a natural choice for me.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts