Warning: contentstack-express framework has been deprecated. We will soon stop supporting this framework.
Difference between Contentstack DataSync and contentstack-express
contentstack-express Framework | Contentstack DataSync |
It syncs data locally and provides a framework to build websites using the synced data. | It is a webhook-based utility that simply syncs the data with your infrastructure. |
It gives you the deployment status of your entries and assets (Pending, In Progress, and Published). | The deployment status of your entries and assets is not available. |
Why switch to Contentstack DataSync
- Decoupling: We have decoupled the sync features from contentstack-express and now provide the sync feature as a standalone utility through Contentstack DataSync. Moreover, the contentstack-express framework has been deprecated.
- Improved scalability: Using Contentstack DataSync, you can store data not only on Filesystem but on other database systems as well (such as MongoDB).
- Quick and easy website creation: Lastly, Contentstack DataSync provides a boilerplate to get started as well as a JavaScript SDK boilerplate to create JavaScript-based websites. We have also created a guide on an example e-commerce website for your reference.
Migrate from contentstack-express to Contentstack DataSync
If you already have a website running on contentstack-express, you can switch to DataSync by performing the following steps:
- Start Contentstack DataSync
Start the utility as mentioned in the guide. All your published data will be synced and stored on your local storage system. - Add routes of your web pages
Routes in contentstack-express were handled by the framework itself. In Contentstack DataSync, you will have to add your web pages routes as shown in the guide. - Migrate the templates
- Then, migrate the templates by copying and pasting the public folder from your contentstack-express app (./themes/basic/public) in the boilerplate template (./public).
- Add the layout for your templates from (./themes/layout) to (./views/layout), and configure “view” path and engine accordingly.
-
Add partials from (./themes/partials) to (./views/partials) and add the following line of code in your header and footer templates.
{% set header = header.entry %} or {% set footer = footer.entry %}
- If you have used any Template Helper methods, such as getAssetUrl, you will have to write your own middleware to support them.
- Add and configure a middleware to serve images.
- Migrate the plug-ins
-
If you have used custom routes in contentstack-express similar to the following snippet:
Myplugin.templateExtends = function(engine) {
engine.getEnvironment().addFilter('shorten', function(str, count) {
return str.slice(0, count || 5);
});
};
-
Then, add your route in the boilerplate as follows:
module.exports = (engine) => {
engine.addFilter('shorten', function (str, count) {
return str.slice(0, count || 5);
});
}
-
For accessing the template engine, write the code in app.js
var engine = nunjucks.configure('views', {
watch: true,
autoescape: false,
express: app
})
require('./middlewares/ui_filters')(engine)
-
You will then have to migrate all the routes as shown in the example guide:
Myplugin.serverExtends = function(app) {
app
.extends()
.get('/careers', function(req, res, next){
var query = stack.ContentType('careers').Query().toJSON().find();
query
.then((data) => {
req.getViewContext().set("data", data);
next();
})
.catch((error) => {
req.getViewContext().set("data", {});
next();
});
});
}