Run the Express sample app
In this guide, you'll learn how to run a JavaScript sample app built on Express.js and see your project's content in your browser. The sample app will show content from a sample project and you'll also get to change a thing or two in the project.
New to Content as a Service?
If you are new to the world of Content as a Service (CaaS), you might want to start by building a Hello world application.
After you grasp the core idea behind CaaS, everything in the sample application will make a lot more sense much faster.
Looking for your favorite Javascript framework?
Depending on your preferences, you can choose from the following tutorials:
Table of contents
Sample project for the app
The sample app displays data from the Sample Project that demonstrates our best practices and features of Kentico Kontent. If you don't have it yet, create your own sample project, it only takes a minute.
This full-featured project contains marketing content for Dancing Goat – an imaginary chain of coffee shops. Once you run the sample app, you'll see content from the Sample Project displayed in your browser.

Running the JavaScript sample app
Before going any further, make sure you have the following:
- Node and npmOpens in a new window installed
- Kentico KontentOpens in a new window account with a sample project
- Your favorite code editor, for example, Visual Studio CodeOpens in a new window
1. Download the app
The source code of the sample application lives in a Github repositoryOpens in a new window. If you are used to working with GitOpens in a new window, you can clone the repository to your computer by typing the following into your console:
git clone https://github.com/Kentico/kontent-sample-app-express-js.gitgit clone https://github.com/Kentico/kontent-sample-app-express-js.git
If you don't have Git installed, you can directly download the sample application as a ZIP fileOpens in a new window, extract it, and continue from there.
2. Connect to your Kontent project
Before you run the app, you need to tell it which Kontent project it should use.
- In the app's root folder, create a new file named
.env
. - Edit the
.env
file. - Insert
projectId=<your project ID>
on a new line with your Sample Project ID.- You can find your project ID in Project settings > API keys > Delivery API card > Project ID field.
- Save the changes.
3. Configure the app
Navigate to the root folder of the application in the command line and install the required npm packages.
npm installnpm install
4. Run the app
Start a Node development server.
npm startnpm start
The application will open automatically in your browser at http://localhost:3000
Opens in a new window.
Now, let's try updating the project's content so that you can see the changes reflected in your locally running application.
Making changes to your project
After you sign in to Kentico Kontent, you'll see your Sample Project to play around with. We recommend you get familiar with content items and how to find stuff in your projects. It's simple yet powerful.
Try to edit an article from the sample project:
- From the app menu, choose Content & Assets.
- Open a published article, for example, the Coffee processing techniques one.
- Look for items with a green Published label and the word Article in the Type column.
- Create a new version to edit the article.
- Make a change in the article, for example, edit the Title text or some other element.
- Publish the changes to see them in the sample app.
Voila! You have successfully updated content in your Sample Project. Refresh the browser window with your application to see the changes on the website.

Looks like someone changed the title of the article.
Feel free to further explore how the content in your sample project is structured.
Exploring content structure
To see details about the opened content item, go back to Kentico Kontent and click Content details in the top right. Under Content type, notice that the item is based on the Article content type.
To open the content type for editing, click Article in the content details.

How the Article content type is modeled
How content is structured in Kentico Kontent
Content item is any piece of content in your project. It is made up of elements, such as texts, images, files, etc.
Each content item is based on a single content type. A content type is a template that defines the structure of the content item – which elements it contains, their names, limitations, guidelines, and so on.
Mix and match the available elements to define your own content types.
Deploying the JavaScript sample app
When using a headless CMS like Kentico Kontent to power a single page application, you don't necessarily have to write any server-side code. Because the application only requires static resources, you have many interesting deployment options available to you.
Here, you're going to use SurgeOpens in a new window to deploy your Express.js sample app:
- Navigate to the root folder of the application in the command line.
- Type
npm install --global surge
to install Surge on your computer. - Type
npm run build
to build the application and make it production-ready. - Type
cd build
to navigate to the build folder. - Type
surge
to deploy your application. The first time you do this, Surge will prompt you to set up your account. Every other time it will confirm the build directory and generate a funny subdomain for your app.
You can change the subdomain if you like and can even use your own domain, all for free. After that, you’re done. The site is deployed and ready to be accessed on the domain specified during deployment.
Summarized
Kentico Kontent makes no assumptions about how your content is displayed. It simply delivers it via a RESTful Delivery API to any application that asks for it – be it a website, mobile app, chatbot, electronic billboard, virtual voice assistant or an internet-enabled toaster.
We deliver the content, you do whatever you want with it – using the technology of your choice.
A traditional CMS would force you to put your content into neatly arranged boxes to fit inside a pre-defined template. The power of Kentico Kontent comes from not getting in your way. Content structure and content presentation are truly separated and you have the flexibility to define both according to the needs of your project.
What's next?
If you'd like to see more than Express.jsOpens in a new window, we also have these JavaScript-based sample apps:
- Angular – Angular 9Opens in a new window sample app, Angular Universal StarterOpens in a new window, and Angular progressive web appOpens in a new window (PWA)
- React single page app
- SvelteOpens in a new window web app with Kontent in a JAMStack scenario
- Vue.js single page app
- Vanilla JavaScriptOpens in a new window sample app
If you want to build your own app, consider using our Express.js BoilerplateOpens in a new window which comes with Apollo server and built-in GraphQL support. Also, you can check out our tutorials on how to build your first React app or your first Vanilla JavaScript app. Lastly, we recommend you take a look at our SDKs for JavaScript.