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
  • Paraxial.io - Bot detection and prevention for Elixir/Phoenix applications
  • Scout APM - Less time debugging, more time building
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • 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

    Web app with React, Phoenix, Elixir and TypeScript

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

  • Paraxial.io

    Bot detection and prevention for Elixir/Phoenix applications. Paraxial.io is bot detection and prevention for Elixir/Phoenix applications. Dealing with scrapers, card cracking, or credential stuffing? We take care of that.

  • 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

    A declarative, efficient, and flexible JavaScript library for building 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 JavaScript and CSS bundler and minifier

    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.

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • Elixir

    Elixir is a dynamic, functional language designed 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