DEV Community

Charles Ouellet
Charles Ouellet

Posted on • Originally published at snipcart.com on

10 2

Using Strapi for Node.js Content Management with a React SPA

Using Strapi for Node.js Content Management with a React SPA

A few months ago, we summoned our in-house Node.js expert to craft a piece about the state of its ecosystem.

In it, he never mentioned Strapi.js.

What a fool. 🤦‍♂️

Sure enough, our readers put him back on track by suggesting this powerful Node.js API framework in the comments.

Today, to prove we took this feedback to heart, I'll make good use of Strapi. I'll show you how to handle content management in Node.js with a React single-page application.

Steps:

  1. Setting up a Node.js backend for Strapi with MongoDB.
  2. Creating appropriate content types in Strapi for the SPA.
  3. Building a React SPA (a basic online shop) with create-react-app.
  4. Bundling & deploying the Universal JS app!

In the process, I reflected a lot about this kind of Universal JavaScript stack and its place in the developer's space.

So let's get philosophical a bit before jumping into technical stuff.

Node.js with React: Why go the Universal JavaScript way?

Only a few years back, building a full stack JavaScript app was pure fantasy. But things have changed.

node-js-react-stack

Some might call it Isomorphic JavaScript, but there seems to be a consensus around the term Universal JavaScript. So I'm sticking with the latter here.

It all started with the MEAN stack (MongoDB/Express/Angular/Node)—the first go-to JS full stack. You can still opt for it today, but it would be a mistake to think it's the only available stack.

→ Read the full post and technical tutorial here

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE