a full stack enthusiast interested in Javascript / Typescript / Kotlin / Python / React / React Native / (Android & iOS) native / Cloud

I created a universal app with Expo for native mobile and web. It works wonderfully. I think a monorepo for local code sharing should efficient than publishing to a private package to Github registry (It works like a charm though).

I thought it’s just a 5 min setup. But I was wrong… Still very easy though. In this blog, we will use monorepo to share code between the backend(Serverless framework) and frontend(Expo).

I always try my best to introduce less overhead and less dependencies to solve a problem.

Our goals

• Yarn only without lerna: Less overhead. And We do not need lerna
• Yarn version: v1.22.4
• Typescript support for all three modules
• I just want to focus on coding without worrying about building pipeline
• No no no, no Babel, that’ll introduce loads of dev-dependencies, I want a clean tree.
• I will show you how to use as well

If you have ever receive this warning from the log of your lambda,

WARNING: Callback/response already delivered. Did your function invoke the callback and also return a promise? For more details, see: https://docs.aws.amazon.com/lambda/latest/dg/nodejs-prog-model-handler.html

I got this when implementing Cognito lambda trigger of the PreSignUp step.

Let’s see how to solve it.

Serverless framework is an awesome tool for AWS lambda. For a new project, if you have seen this warning when deploying:

Warned - no cfnRole set:
Require the cfnRole option, which specifies a particular role for CloudFormation to assume while deploying.

It is a typical permission problem, let’s see how to solve it.

It has something to do with the next.config.js.

Most of the SaaS sites has a similar pattern, marketing pages, pages after login. Marketing pages may or may not share elements in terms of the layout, but the pages after login will share something like sub-nav, top nav, modules, things like that. I use React outer v5 with Typescript. It is easy, but it took some time.

Graphql Shield is a nice library to centralize your authorization rules. But how to use it with Apollo Server? Let’s see. For example, what about I want to do authorization according to the information in JWT?

I love the new hooks from redux-react. It simplify things a lot. Let’s see how to test it.
TBH, the solutions can be applied to any react hooks.

Apollo local cache (InMemoryCache) works super great, but recently I have a problem with it, the UI re-renders when updating the cache after a GraphQL mutation, but not after I calling a traditional REST api and try to update the cache directly. The intention is simple, I want to update the local cache directly and re-render the UI. Let’s see how to solve it.

When use React router, sometimes we need to define the route path as constants like const USER = /user/:userId, and the render the <Route path={USER} /> later. However, when we try to navigate, for example history.push(), we have a problem which we need to replace that :userId with real user id. And when we do it every time we calling history.push, it won’t be any prettier. This is how I solved it with several lines of code.

I think I have a talent to make such a verbose title… xD

Anyway, error handling is tedious or hard, just like naming your blog. But you can’t miss it, because it makes your code robust. AWS lambda is a great way to write your code, and its simple nature enables us to do something very interesting, and make your code clean, I previously looked a lot about best practice of error handling in lambda, but either they mentions other AWS services integration or just lambda-API gateway configuration. Today, let’s talk about the code. How to make this part clean. Even more, we will use Typescript.