FrontendArmory
BlogDemoboardLearning Resources
FrontendArmory
BlogDemoboardLearning Resources

Navi: SEO & routing with vanilla create-react-app

By James K Nelson

Build big, fast, CDN-delivered websites with great SEO & SMO, and all with vanilla create-react-app.

Businesses live and die on their web traffic, most which comes from search engines and social media. If you’re getting paid to build websites or web apps, then you need to think about SEO and SMO — it’s just how the world works.

Now if you were building an old-school PHP or Rails app, SEO would be free and SMO would be easy — you’d just add some meta tags to the <head> of your HTML files. But the future belongs to serverless React, and this presents a problem. You want to build a beautiful, interactive site, but you don’t want to have to eject from create-react-app to do it.

TL;DR? Jump to the docs or the code.

The thing is, React just wasn’t built to do SEO by itself. Sure, it has a renderToString() method… but it doesn’t support most lifecycle methods. And while server-side Suspense is coming, it’s been coming for a year and there’s still no release date.

So here’s the deal: you’re getting paid to build websites. You need to build traffic now — but you don’t want to reimplement everything yet again 6 months down the track. And you’re not alone, so let’s do something about it.

#Have your cake and eat it too

Today I’m releasing Navi: the router and static renderer that drives Frontend Armory. Navi lets you create big, fast, CDN-delivered websites with great SEO & SMO, and all with vanilla create-react-app. Of course, Navi also works great after ejecting, or even with an express-based app. No matter how you use it, you’ll save gobs of time with:

🔥 Simple loading transitions for async content
🗺️ JSON site maps that can be built at runtime or build time
⚠️ Console warnings when a <Link> points to a 404
📜 Scroll management that just works
♿️ Page <title> management for accessibility
🏷️ Great TypeScript support
👌 A dead-simple API

#Many hands make light work

Navi has around 2 years of history behind it, and its overarching design has barely changed over that time. It’s React integration was designed to work great with React Suspense - so when it arrives, your app will spontaneously grow a number of new features. And of course, Navi is 100% open source and open to contributions. Here are a few ways you could help:

  • Try it out and open an issue with your feedback 😄
  • Build the Vue integration (The navi package itself is vanilla JavaScript, and it’ll work just as well with Vue as it does with React)
  • Use the edit this page links to improve pages in the documentation

Speaking of documentation — the Navi website is 100% open source, and built with Navi and React itself. If you want to run it locally, just clone the navi-website repository, then run yarn install and yarn start and you’ll be good to go! But if you view them on Frontend Armory, you’ll get an extra special feature…

#All I want for Christmas is amazing documentation

Navi’s docs are choc-full of example code. And when viewing the docs as a Frontend Armory Pro member, many of these examples will be interactive demoboards — allowing you to quickly try out new things, and easily share the result with colleagues and friends. Pro members will also gain access to docs on niche topics like integrating Navi with react-router or react-helmet — helping to support development, and giving you peace of mind about the project’s sustainability into the future.

Of course, all of the documentation will still be completely open source, and available for you to fork and edit at your pleasure. In fact, the first three docs are already available, and I’ll be releasing a new page each day until Christmas. Here’s the plan:

  • Coming soon: Generating JSON site maps (pro exclusive)
  • 🎄 Christmas Day: it’s a surprise 😉

I’ll be linking each of these pages as they’re released, so check back each day to get a brand new link! ⏱

Thanks so much for reading! Given that you’ve read all this way, you really should give Navi a try — just head on through to A Minimal Example in the docs to try it out within the browser. And once you’re done, let me know your thoughts! Just open an issue, or send me a tweet at @james_k_nelson. Finally, if you decide to use Navi in your project, make sure to join Frontend Armory Pro to unlock access to the demoboards and integration docs.

See you again on Christmas Day with a Navi surprise! 🎁