Quickstart

This quickstart guide will take you through the steps involved in creating your first web page using contentstack-express. contentstack-express is a Node.js web application framework based on Node.js Express, which provides a number of features for creating websites easily.

Step 1 - Create a stack

A stack is like a container that holds the content of your site. To create a new stack, log in to your Contentstack account and click the ‘+ New Stack’ action button. Enter a suitable name and description (optional) for the stack.

Web Quickstart Create a Stack.png

Step 2 - Create a content type

A content type is your page’s structure. Since we are planning to create a simple home page, the page will contain only a couple of fields: Title and Body. You can add/remove more fields depending on your requirements. Let’s look at a short video to learn the process of creating a content type (‘Home’).

Web Quickstart Create a Content Type.png

Step 3 - Create your first page

Pages can be created by creating entries using the defined content type. To create your website’s home page , click the ‘Home’ content type and add content in the given fields.

Create an Entry.png

With this step, we’re almost done with defining the structure and content of your site. Let’s now set up the publishing environment.

Step 4 - Set up publishing environment

A publishing environment is your web server where the content will be deployed. To add a publishing (content delivery) environment, go to ‘SETTINGS’ > ‘Environment’. A publishing environment requires a name and valid server endpoint to display the site’s content. Here, we will create an environment named ‘Development’ with http://localhost:4000 as the server endpoint in order to be able to publish on the local machine. Then, click on the ‘Advanced’ option and select the ‘Deploy Content to Server(s)’ option to sync the published content on your web server.

Add an Environment.png

Step 5 - Set up and connect contentstack-express

  1. Prerequisite
    You need Node.js v4.2.0 or later to use Contentstack.
  2. Install the CLI
    Run this command in a Terminal or command prompt to obtain and globally install the latest version of the framework on your system:
    $ npm install -g contentstack-cli
        
    Note: You may need administrator privileges to perform this installation.
  3. Connect
    In the terminal, navigate to your workspace, and run the connect command.
    $ contentstack connect
        
    This will prompt you to enter the stack API key and access token. You can find these details in the ‘SETTINGS’ > ‘Stack’ page.
    Enter your stack api key: {API_KEY}
    Enter your stack access token: {ACCESS_TOKEN}
        
    This will validate the stack. Once validated, you will be prompted to enter the project root directory and select the publishing environment (‘development’) which we created in earlier step.
    Enter name of the directory to contain the project: (my-site)
    Select the publishing environment: 
    1. development
        
    This will automatically configure your project for the selected publishing environment along with the basic theme for the website. We are now ready to start the application.
  4. Start your application
    To start your application, simply navigate to your site development folder and start it using Node.js. In this case, the steps would be as follows:
    $ cd my_new_site
    $ npm start
        
    We're ready with setting up the publishing environment! However, your site’s home will throw a ‘404’ error. This is because the content has not yet been published. Let’s publish the home page.

Step 6 - Publish content

Go to the ‘Home' content type, and publish the entry on the ‘Development' environment. Visit the page http://localhost:4000 in your browser to view the published content.

Publish an Entry.png

Contentstack's web framework automatically applies the default page theme and design. Check out the Theming guide to customize your page design.

Was this article helpful?
top-arrow