Was this article helpful?
Thanks for your feedback
With Contentstack, you can set up a system that'll enable you to preview content changes instantly. When you save an entry, it will get auto-published on a specified environment such as “pre-prod,” “staging,” and so on.
After the entry is auto-published, the page will auto-refresh itself allowing you to view your changes instantly. The advantage of this setup is that you don't have to manually publish the entry or refresh the page. It happens automatically.
In this document, we'll discuss the steps required to set up such a system.
Brief overview of the process: When a user clicks on the Save button, a webhook is triggered which invokes the AWS Lambda Function. The Lambda Function then publishes the content on the specified environment, such as “pre-prod” or “preview.” When the content is published, another webhook is triggered via the web application. This notifies Pusher to send real-time reload request for the page that's being edited, letting you preview your content changes instantly.
To accomplish this, we will divide the task in two sections:
Let's discuss the steps in detail.
In the following steps, we'll set up a system that'll auto-publish an entry using AWS Lambda when the entry is saved.
Note: The Management Token will be visible on the dialog that appears. It will not be visible once you close the dialog, so make a note of your management token for future reference. Read more about Management Tokens.
Note: You can use any language instead of Node.js. You can also add triggers to your lambda to push an event when the lambda is invoked.
CONTENTSTACK_STACK_MANAGEMENT_TOKEN= Your Stack Management token CONTENTSTACK_STACK_API_KEY= Your Stack API Key
With this, we have set up the Lambda Function to publish the entry on the specified environment when it is saved.
Next, we will create a webhook for capturing the entry save events. Proceed as follows:
With this, we have completed the basic setup to execute our first task — publishing an entry. Now create and save your entry. As soon as you save your entry, AWS Lambda will publish it on your specified environment such as “staging,” “pre-prod,” or “preview.”
Let's now move ahead and set up a system for auto-reloading the page when the entry is saved and published by AWS Lambda.
For our example, we'll use Pusher which is a hosted service. By using Pusher, we'll be able to add real-time bi-directional functionality via WebSockets (with HTTP-based fallbacks) to our mobiles or web applications.
Pusher also allows us to apply filters to better control the way messaging is handled. Many organizations use Pusher to create live activity streams where feeds get updated in real time. Other examples include live chats, score updates, real-time stock updates, live data visualizations, and so on.
For our example, we will use Pusher to let users see the content previews real-time when they save an entry. For that, we will need to set up an account with Pusher. Let's follow the below steps:
This will enable your app to communicate with Pusher using the keys, so that Pusher can generate content previews instantly.
The next step is to install Pusher and configure it in you web app code. Execute the following steps at the Server Side:
npm install pusher --save
const Pusher = require('pusher'); const pusher = new Pusher({ appId: 'APP_ID', key: 'APP_KEY', secret: 'APP_SECRET', cluster: 'APP_CLUSTER' }); const broadcast = (channel, event, data={}) => pusher.trigger(channel, event, data); module.exports.broadcast = broadcast;
const broadcast = require('../lib/realtime').broadcast app.post('/webhook', function(req, res){ res.header("Content-Type", "text/plain"); res.header("statusCode", "200"); res.set("Connection", "close"); res.status(200) res.send('success') broadcast(req.body.data.entry.uid, 'publish') })
<script src="https://js.pusher.com/4.3/pusher.min.js"></script>Add the following JavaScript snippet to client side which will listen for publish events on channel with entry UID as name:
var pageRef = document.body.getAttribute('data-pageref'); var pusher = new Pusher("APP_KEY", { cluster: "APP_CLUSTER", forceTLS: true }); var channel = pusher.subscribe(pageRef); channel.bind("publish", function(data) { location.reload(); });
With these steps, you have configured Pusher in you web app.
So now when any entry is published on the specified environment successfully, Pusher will auto-refresh the page letting you preview the changes instantly.
Additional Resource: Learn how to make the best use of the available Content Types. Read our guide on Content Modeling Best Practices for more details
Was this article helpful?
Thanks for your feedback