Modern Webapps with React, Phoenix, Elixir and TypeScript

1

Vite

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/' : '/', }).

#Software Development #Web Frameworks #Developer Tools 374 social mentions

2

React

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.

#Javascript UI Libraries #JS Library #JavaScript Framework 775 social mentions

3

axios

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

#Javascript UI Libraries #JS Library #Developer Tools 109 social mentions

4

esbuild

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.

#JS Build Tools #Web Application Bundler #Project Management 120 social mentions

5

Elixir

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.

#Programming Language #OOP #Generic Programming Language 73 social mentions