NodeJS on the Frontend

What if you could import a generic NodeJS function into your frontend code? I'll show you how I made it possible.

What if we could import a generic NodeJS function into our frontend code? In this example, statuses returns results from Firestore.

import { statuses } from './statuses.server.js'

export const Statuses = () => {
  
  if(loading) return <div>Loading...</div>
  
  return (
      <div
        onClick={() => {
          let statuses = await statuses('timeline')
          console.log(statuses)
        }}
      >
        Load Statuses
      </div>
  )
}

Instead of writing network requests, wouldn't it be nice to write full stack code, and import it like a normal part of the frontend? Keep reading to find out how I got this working in a real application.

Contents

• What is it

• GRPC inspired

• How I made this work

• Server Loader

• Node Setup

• Recap

• Final Thoughts

How things are done currently

In traditional apps, our frontend might have a file called Statuses.js that looks like this:

import React from 'react'

export const Statuses = () => {
  let statuses = ['first', 'second', 'third']
  
  return statuses.map…