Was this article helpful?
Thanks for your feedback
Many websites have a common layout that provides a consistent user interface as users navigate from one page to another. This layout usually includes elements such as the site header, navigation, and footer.
This leads to a common notion, especially with ones who have worked with traditional content management systems, that everything appearing on a page is required to be fetched from an entry, with references to common UI elements.
In this document, we'll discuss how we can create a consistent website layout using Express and Contentstack.
First, create a stack. For this example, we have created sample content types. You just need to download them from our GitHub page.
After downloading the content types, add entries to it, add a publishing environment and publish the entries.
Once you have these configured, you're ready to move on to download the code.
We have created an example app. Download it from GitHub. Once you have downloaded the code, open it in any code development tool, it should look similar to the following:
Below we list some of the important files and their respective explanation.
So, whenever the Home page route is hit, the header and footer will be rendered. The data will be fetched every time the route is hit. You can add more routes such as Products, Blogs, etc and the header and footer will be shown on each page.
Once you have downloaded the code, open the config.env and add your stack details to it. You'll also need to enter the content type and entry UIDs respectively as shown below:
npm install
node app.js
By default, the app will start on port 3000. An example is shown below:
Additional Resource: Learn how to Add Elasticsearch to Contentstack-powered websites. Read more to know how.
Was this article helpful?
Thanks for your feedback