GrapesJS को एक्सप्रेस/Node.js बैकएंड के साथ कैसे एकीकृत करें (पूरी गाइड 2026)

GrapesJS एक्सप्रेस/नोड क्यों फिट बैठता है

GrapesJS ब्राउज़र में चलता है, इसलिए एक्सप्रेस बस संपादक पृष्ठ और दो की सेवा करता है JSON मार्ग - एक सहेजे गए प्रोजेक्ट को लोड करने के लिए, एक इसे स्टोर करने के लिए। यह मार्गदर्शिका कार्य करती है संपादक, नोड के साथ सामग्री बनाए रखता है, और HTML/CSS निर्यात करता है।

1. एक्सप्रेस सर्वर

import express from 'express';
const app = express();
app.use(express.json());
app.use(express.static('public'));   // serves public/index.html

let page = {};                       // swap for a real DB

app.get('/load', (req, res) => res.json(page));

app.post('/save', (req, res) => {
  page = req.body;                   // full GrapesJS project
  res.json({ status: 'ok' });
});

app.listen(3000, () => console.log('http://localhost:3000'));

2. संपादक पृष्ठ

बनाना public/index.html:

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<div id="gjs"><h1>Edit me</h1></div>
<script src="https://unpkg.com/grapesjs"></script>
<script>
  grapesjs.init({
    container: '#gjs',
    height: '100vh',
    fromElement: true,
    storageManager: {
      type: 'remote',
      stepsBeforeSave: 3,
      options: { remote: { urlStore: '/save', urlLoad: '/load' } },
    },
  });
</script>

क्योंकि पेज और एपीआई एक ही एक्सप्रेस मूल साझा करते हैं, इसलिए अनुरोध हैं समान-मूल और आप पूरी तरह से CORS कॉन्फ़िगरेशन से बचते हैं।

3. एक वास्तविक डेटाबेस पर बने रहें

app.post('/save', async (req, res) => {
  await db.pages.updateOne(
    { key: 'home' },
    { $set: { project: req.body, html: req.body['gjs-html'], css: req.body['gjs-css'] } },
    { upsert: true }
  );
  res.json({ status: 'ok' });
});

उत्पादन युक्तियाँ

एक प्रोटोटाइप जो पृष्ठ को एक चर में संग्रहीत करता है, पुनरारंभ से बच नहीं पाएगा - पृष्ठ द्वारा कुंजी वाले डेटाबेस (एक JSON/JSONB कॉलम या एक मोंगो दस्तावेज़) तक बना रहता है। GrapesJS परियोजनाएं बड़ी हो सकती हैं, इसलिए एक्सप्रेस की बॉडी लिमिट ()express.json({ limit: '5mb' }) बढ़ाएं या 413 के साथ चुपचाप विफल हो जाएं। प्रमाणीकरण के साथ स्टोर मार्ग को सुरक्षित रखें ताकि कोई भी पृष्ठ को अधिलेखित न कर सके, और पूरी तरह से CORS से बचने के लिए एक ही एक्सप्रेस मूल से संपादक और API की सेवा कर सके। यदि वे भिन्न होना चाहिए, तो संपादक मूल के लिए CORS सक्षम करें और हेडर की Content-Type अनुमति दें।

आवश्यक शर्तें

आपको 18+ और एक्सप्रेस 4 या 5 Node.js की आवश्यकता होगी। GrapesJS ब्राउज़र में चलता है, इसलिए एक्सप्रेस संपादक पृष्ठ और दो JSON मार्गों की सेवा करता है - लोड और स्टोर। के साथ परिचित मिडलवेयर, रूटिंग और JSON बॉडी पार्सिंग पर्याप्त है।

संपादक में कस्टम ब्लॉक जोड़ें

इसके बाद grapesjs.initब्लॉक मैनेजर के साथ ड्रैग करने योग्य ब्लॉक पंजीकृत करें:

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});

एक समृद्ध सेट के लिए तैयार ब्लॉक पुस्तकालयों और प्रीसेट को GJS.Market से खींचें।

एक वास्तविक डेटाबेस के लिए बने रहें

एक प्रोटोटाइप जो पृष्ठ को एक चर में संग्रहीत करता है, पुनरारंभ नहीं करेगा। पृष्ठ द्वारा कुंजी किए गए डेटाबेस पर बने रहें:

app.post('/save', async (req, res) => {
  await db.pages.updateOne(
    { key: 'home' },
    { $set: { project: req.body, html: req.body['gjs-html'], css: req.body['gjs-css'] } },
    { upsert: true }
  );
  res.json({ status: 'ok' });
});

app.get('/load', async (req, res) => {
  const page = await db.pages.findOne({ key: 'home' });
  res.json(page?.project ?? {});
});

प्रदर्शन युक्तियाँ

GrapesJS परियोजनाएं बड़ी हो सकती हैं, इसलिए एक्सप्रेस की बॉडी लिमिट बढ़ाएं ()express.json({ limit: '5mb' }) या सहेजता है 413 के साथ विफल। परोसें CORS से बचने के लिए एक ही मूल से editor और API का इस्तेमाल करें. रेंडर किए गए आउटपुट को कैश करें और इसे सेव पर बस्ट करें ताकि विज़िटर कभी भी रेंडर लागत का भुगतान न करें।

सुरक्षा के मनन

स्टोर मार्ग को प्रमाणीकरण के साथ सुरक्षित रखें ताकि कोई भी पृष्ठ को अधिलेखित न कर सके। यदि संपादक और एपीआई अलग-अलग मूल पर रहते हैं, केवल संपादक मूल के लिए सीओआरएस सक्षम करते हैं और हेडर की Content-Type अनुमति दें। आउटपुट पर संग्रहीत मार्कअप को सैनिटाइज़ करें यदि गैर-व्यवस्थापक संपादित कर सकते हैं। पेलोड आकार की पुष्टि करें।

सामान्य त्रुटियों का समस्या निवारण

413 पेलोड बहुत बड़ा मतलब है कि JSON शरीर की सीमा से अधिक है - बढ़ाएं यह। एक CORS त्रुटि का मतलब है कि संपादक और एपीआई अलग-अलग मूल पर हैं CORS कॉन्फ़िगर किए बिना। एक अनस्टाइल या खाली कैनवास का अर्थ है स्टाइलशीट लोड नहीं हुई या कंटेनर मौजूद नहीं था।

एक्सप्रेस/नोड के साथ GrapesJS का उपयोग कब करें

GrapesJS एक कस्टम नोड ऐप फिट बैठता है जिसे अपने स्वयं के साथ एक एम्बेडेड विज़ुअल एडिटर की आवश्यकता होती है भंडारण - एक सास पेज बिल्डर, एक ईमेल संगीतकार, एक सीएमएस सतह। इनलाइन रिच के लिए पाठ, एक हल्का संपादक पर्याप्त है; लेआउट, स्टाइल के साथ पूर्ण-पृष्ठ रचना के लिए, और स्वच्छ निर्यात, GrapesJS मजबूत, एमआईटी-लाइसेंस प्राप्त विकल्प है।

अगले चरण

संबंधित GrapesJS + React और देखें GrapesJS + लारवेल गाइड, स्टोरेज एडाप्टर प्लगइन्स ब्राउज़ करें और GrapesJS मार्केटप्लेस, या से शुरू करें GJS.Market होम पेज।

अक्सर पूछे जाने वाले प्रश्न

GrapesJS एक्सप्रेस बैकएंड से कैसे बात करता है?

संग्रहण प्रबंधक type: 'remote' को इसके साथ सेट करें urlStoreurlLoad एक्सप्रेस मार्गों पर इशारा करते हुए; जोड़ें express.json() और पढ़ें req.body.

नोड को प्रोजेक्ट को कहां स्टोर करना चाहिए?

एक JSON कॉलम, एक MongoDB दस्तावेज़, या एक प्रोटोटाइप के लिए एक फ़ाइल - पूर्ण संग्रहीत करें प्रोजेक्ट प्लस वैकल्पिक html/css ।

मैं सीओआरएस समस्याओं से कैसे बचूं?

संपादक और एपीआई को एक ही एक्सप्रेस मूल से परोसें ताकि अनुरोध हों समान-मूल; अन्यथा संपादक मूल के लिए CORS सक्षम करें।