Search for a command to run...
extending the codebase to generate web compatible build for desktops
Hello, I am a WEB and MOBILE app developer. I like to write about Javascript, React, NextJS, React Native and all the good stuff.
No comments yet. Be the first to comment.
Auth solution for React native apps
Bringing a project to life needs a clear plan. You start by thinking about the features you want and get into the nitty-gritty details. When you have a clear picture, implementing the project becomes much smoother. A big part of this involves figurin...
Search, Publish and Share your hashnode blogs
includes Architecture, internal tooling and comparison with web practices
Wishup is a multi-platform app that lets entrepreneurs discover right remote assistants, from a pool of vetted, trained and top 0.0001% talents and manage work seamlessly on day to day chores.
Wherever possible extend the UI, margins paddings to exisitng components with responsive code. We used Tamagui to build our app and it was super easy to extend the UI components to web, just by adding sm, lg, gt props to pass in styles responsive to various screen sizes.
For platform specific resolution of certain components and behavior. It is best to colocate the files, give same names and import the code, component and metro will resolve the respective platform files. Layout and access varies distinctly from mobile to web, so writing platform specific module is a great practice we adopt. Creating filename.web.ts, wherever there is a web specific implementation needed for that feature.
Building Push notification feature is straight-forward with Expo push notifications, but to add support for a push notifications on web, that needs a service worker setup to create subscription for that browser. I have created this gist to refer and implement the push notifications on expo-web.
The problem with push notifications on web is it can only be implemented in a service worker.
The IndexedDB and Cache Storage APIs are accessible in service workers. However, Local Storage and Session Storage are not.
So, we wrote every function mapping the utility to our persistent storage solution of mobile, i.e., MMKV storage, which use localstorage on web.
LocalStorage is also not reactive and to handle the variables that need to run callbacks and reactivity, added all the hooks to refer the values and user data in indexedDB.
To build the sidebar on web, and chat interface as a common component across all tabs, we upgraded the app to v7 of react navigation making use of `tabBarPosition` to render sidebar for web platform, and end up passing the custom UI for sidebar.
We make use of layout prop of the navigators and screen to render shared components across the navigators and screens. It made features like our Chat very easy to implement as most of the heavy lifting is done by the library.
Later, we wrote the aliases against every navigator and screens, for better url structures, while implementing universal linking and deep links in the hybrid app.
Common workarounds
From writing platform based React context for auth, we use Auth0, to writing conditonal Provider wrappers.
Defining and blocking the resolution of certain components that simply does not work on web in Metro and ignoring certain parts of code for one platform and adding extra code for another. Expo 52, tree shakes the codebase and optimising the build anyways. Using Atlas is a great practice to pick and kill unused packages.
Deployment configuration installs serve, copies the app’s source code, builds the app for the web, and sets up a service worker. It exposes port 8081 and serves the app from the /dist folder on that port.
We setup a dockerfile to host the frontend for our app on EC2, It is working alright for now. If something occurs, Expo community is always ready to help.
While building the new clients with expo-web we used the same legacy structured Postgres DB and wrote the type APIs over it.
Our backend stack is apollo server, with Graphql APIs. We are using prisma to write typed queries, mutations and resolvers and managing our database schema effortlessly. Some AI powered features and server driven UI configurations for certain apps. Usage of Graphql-shield to manage admin roles on the app. It is a great product catering 4 types of user with varying accesses, namely, Clients, VAs, Admin roles and Client’s team members.
With this, I am really looking forward to learn more about the rich apps built with expo-web. please hit me up with your implementations at X
Thanks for reading!
