Custom Backend

So, you love Remake's syntax and features, but you want to use your own custom backend. Fair enough 🤷‍♂️

Maybe you prefer a PaaS like Supabase or a starter app generator like Divjoy — or have your own custom Rails, Node, or PHP setup.

You're in luck!

Remake's client-side code is easily detached from the backend code.

Client-side Remake

Here's a demo of a Remake app that works entirely client-side!

This is a live, working demo — try editing the code to see the app change!

See the Pen Todo App (Remake Demo) by David Miranda (@panphora) on CodePen.

Read on to see how to can plug this demo into any backend (with a little elbow greese)!

Build your own backend

You can use the client-side demo above as the foundation for building your own stack on top of Remake.

Here's a video explaining how:

Basically, it all comes down to ➡️ this well-documented script, which makes the whole demo work by overwriting Remake's default upload, add item, and save functionality and replaces it with versions that work client-side.

To run that script, you need a few dependencies:

What you'll need to add yourself

The client-side demo is a fully working app, but it doesn't support user accounts or other important features that a real app has.

Here are the main ones you'll have to take care of:

  • Create user accounts for each of your users
  • Save data to the current user's account
  • Load data from the current user's account
  • Check if the current user can edit the page and only display Remake's editable areas then
  • Render new items to the page based on the names of components/partials (like Remake's new: attribute does: see docs page)
  • (optional) Handle routing if you want your app to have multiple pages
  • (optional) Upload files to the current user's account
  • (optional) Have the ability to add unique ids to every object in your data, so you can render only that object or save into only that object (necessary for nested routes and pages). Read about how Remake does this.

Read through the comments in the actual script for more details.

View on GitHub
☰ Menu