Expo is back on their grindset

Issue #257.January 25, 2024.2 Minute read.
Bytes

Today’s Issue: Bachelor in Paradise (for web frameworks), the Rome Survivors Club, and OSS crypto sponsors still living the 2021 dream.

Welcome to #257.

Eyeballs logo

The Main Thing

Ron Burgundy lifting weights shirtless

Welcome to the Expo church of gainz

Expo takes file-based routing to a whole new level

The React Native ecosystem is like your local gym — a little intimidating at first and busy as hell in January.

Last January, we got React Native’s feature-packed 0.71 release and the long-awaited launch of Expo Router v1, which brought file-based routing to RN for the first time.

This January, Expo is back on their grindset releasing Expo SDK 50 last week and Expo Router v3 on Tuesday, which the Expo team is calling its “most powerful release yet.”

That’s because Expo Router v3 introduces beta support for servers, a whole new platform that gets Expo closer to its goal of becoming the first universal, full-stack React framework for iOS, Android, and the web.

It does this via API Routes, a zero-config system for creating universal server endpoints for your app and website with a unified build process.

You just add a new file with the +api.js extension to the app directory and voila — it’ll only be rendered on the server, but it’ll still have access to all the same language features as your client code (TypeScript, env variables, runtime built-ins, error handling, etc).

This gives you a straightforward way to write server-side logic directly into any React Native project, for mobile apps and web apps. API Routes is still in beta, but as Expo continues to improve the native runtime, it’ll make it easier than ever to work across environments. Eventually, this will allow Expo to bring support RSC to native apps too 🤯.

And if you’re not ready to hop on the file-based routing hype train, you can just drop down to the underlying navigation primitives for manual configuration instead.

Bottom Line: Expo is already the go-to option for building mobile apps with React/React Native, and with each Expo Router release, it’s looking like a better and better option for web apps too.

        
clerk-logo

Our Friends
(With Benefits)

Arthur the Aardvark pulling his eyes and glasses off his face

When you realize you can spend the other 13 days of your auth sprint on vacation

Clerk gives you way more than just a sign-in box

It comes with everything you could ever need for authentication — like multifactor auth, session management, magic links, bot detection, and much more.

All you do is add <SignIn/>, <SignUp/>, <UserButton/>, and <UserProfile/> to your app, and you’ve got complete user management functionality that’s enterprise-ready from day one.

Why is Clerk so easy to use?

  • Embeddable UI components give you beautiful user management functionality that you can deploy to your own domain, with no jarring redirects 🙏

  • Seamless SDKs for every major framework give you a great DX — they even have first-class support for RSC and App Router in Next.js (see docs)

  • Database integrations make it easy to leverage Clerk as the source of truth for user data.

Try it for free — and see why CEOs from companies like Vercel, Ping Labs, and Supabase recommend Clerk so strongly.

Spot the Bug logo

Spot the Bug

Sponsored by FluxNinja

Their load management platform gives you a simple, 3-in-1 API for rate limiting, caching, and request prioritization. It’s perfect for regulating the use of expensive, pay-as-you-go APIs like OpenAI, GitHub, Shopify, and more.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self';" />
    <title>Bootstrap Example</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <button class="btn btn-primary">Click Me</button>
  </body>
</html>
Cool Bits logo

Cool Bits

  1. The Macintosh officially turned 40 years old yesterday. To celebrate, let’s all behold the greatness of this original Macintosh launch brochure.

  2. Adam “Cascade Crusader” Argyle wrote about 5 CSS snippets every front-end developer should know in 2024.

  3. Knock created a single API for managing all your notification channels, including email, in-app, SMS, and push. And it comes with pre-built React components, so you can look like a 10x engineer who builds multi-channel notifications in less than a day. [sponsored]

  4. Igor Roztropiński wrote about how htmx and Web Components are a perfect match. But will their love be able to withstand 6 weeks living in an island paradise with 10 other beautiful singles? Tune in next week to find out.

  5. Deno just released v1.40, which introduces the Temporal API for easier date and time operations.

  6. Product for Engineers is PostHog’s newsletter dedicated to helping engineers improve their product skills. It comes with deep dives on top startups, their lessons and mistakes from building PostHog, advice for crafting great products, and unreasonably cute hedgehog illustrations. [sponsored]

  7. Hiroppy (a maintainer for Node.js and webpack) created this free Next.js App Router Training, which introduces a lot of basic App Router patterns with interactive code examples.

  8. The Rome Survivors Club Biome Core Team shared their Roadmap and areas of focus for 2024.

  9. Take the State of Data survey, so we can roast you for your answers when we write about the results next month. It takes 7 minutes, and you might win some AirPods and other cool stuff.

  10. Vocs is a new minimal documentation framework that’s powered by React, Vite, and 18 crypto sponsors who refuse to believe that it’s no longer 2021.

Spot the Bug logo

Spot the Bug: Solution

Sponsored by FluxNinja

The content security policy is set to only allow resources from the same origin as the page itself. This means that the bootstrap CSS file will not be loaded. To fix this, we need to add the bootstrap CDN to the CSP:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; style-src https://stackpath.bootstrapcdn.com;"
    />
    <title>Bootstrap Example</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
    <h1>Hello, World!</h1>
    <button class="btn btn-primary">Click Me</button>
  </body>
</html>

Note: Content Security Policies are usually set in the HTTP response headers rather than in the HTML itself, but there are some cases (like page specific policies) where it could be useful to set them in the HTML.