Can't send form data from frontend to backend in my Shopify app

neyaz14 · ‎05-13-2025

❓ Problem: Can't send form data from frontend to backend in my Shopify app

Hi everyone,

I'm building a custom Shopify app (not using Theme App Extensions) and currently working on a feature where I collect form input from the frontend and send that data to my Node.js + Express backend to save it in a MongoDB database.

However, I'm running into a strange issue — the data doesn't seem to reach the backend at all. Even the console.log() statements in the backend route don't show up, which means the route might not be getting hit at all.

📋 What I’m trying to do:

I have a form on the frontend that collects three fields: API Key, secret Key, and base URL.
On form submission, I want to POST this data to the backend route /credentials/steadfast Create.
The backend should receive this data, validate it, and save it to the database.

💥 The Issue:

On clicking the "Submit" button:
- The frontend sends the request using fetch().
- But nothing shows up in the backend — not even console.log() logs.
- Also, in the frontend, when I try to parse the response using response JSON(), I get:
  
  Syntax Error: Unexpected end of JSON input
- This likely means the backend is either not responding properly or not responding at all.

🤔 My Questions:

What is the correct and reliable way to send form data from a React-based Shopify app frontend to a Node.js/Express backend?
Are there special headers or routing concerns when working with embedded Shopify apps (even without using Theme App Extensions)?
Could this be a problem with fetch, CORS, or proxy misconfiguration?

📎 Any help, suggestions, or working examples would be really appreciated!

Let me know if you'd like me to share exact code or repo links.

Thanks in advance! 🙏

Code Base :

📋 Frontend Code (React):

const handleSubmit = async () => {
  console.log('API Key:', apiKey);
  console.log('Secret Key:', secretKey, baseUrl);

  const data = {
    apiKey,
    secretKey,
    baseUrl
  };

  try {
    const response = await fetch('/credentials/steadfastCreate', {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });

    const text = await response.text();
    console.log("Raw response text: ", text);

    const result = JSON.parse(text);
    console.log('Saved:', result);

    if (response.ok) {
      // optionally reset form or show toast
    } else {
      console.error('Error:', result);
    }
  } catch (error) {
    console.error('Error saving credentials:', error.message);
  }
};
// ------------------------------------------------------------------------------------
🖥️ Backend Code (Express Router):

import express from 'express';
import SteadfastModel from "../Models/SteadfastModel.js";

const router = express.Router();

router.post('/steadfastCreate', async (req, res) => {
  try {
    const { apiKey, secretKey, baseUrl } = req.body;

    console.log("Received:", apiKey, secretKey, baseUrl);

    if (!apiKey || !secretKey || !baseUrl) {
      return res.status(400).json({ error: 'Missing fields' });
    }

    const newData = await SteadfastModel.create({ apiKey, secretKey, baseUrl });

    console.log("Saved to DB:", newData);
    return res.status(200).json({ success: true, data: newData });

  } catch (err) {
    console.error("Server error:", err);
    return res.status(500).json({ error: 'Internal server error', details: err.message });
  }
});

export default router;
// ------------------------------------------------------------------------------------
🧾 Mongoose Schema:

import mongoose from "mongoose";

const SteadfastSchema = new mongoose.Schema({
  apiKey: {
    type: String,
    required: true,
  },
  secretKey: {
    type: String,
    required: true,
  },
  baseUrl: {
    type: String,
    required: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

const SteadfastModel = mongoose.model('steadfastCred', SteadfastSchema);
export default SteadfastModel;
// ------------------------------------------------------------------------------------
📂 Main App.js Backend Entry:

import express from "express";
import SteadfastRoute from "./routes/SteadfastRoute.js";

const app = express();

app.use(express.json()); // Make sure body parsing is enabled
app.use('/credentials', SteadfastRoute);

neyaz