Manage Single Page Web App with Contentstack

A Single Page Web Application (SPWA) is an app that works within the browser and does not require page reloading during usage. It is more convenient to use and manage than multi-page web apps. Gmail and Google Maps are the most common examples of SPWA that we use almost daily.

Additional Resource: We have a knowledgebase of articles that might come handy. Try out our How-to guides

In this document, we will discuss how you can create a single-page app and manage its content through Contentstack. We will then use Content Delivery API calls to fetch content from Contentstack and display it on the app.

Prerequisites

• Contentstack account
• Working knowledge of React, Node, and APIs

Managing SPWA with Contentstack

Managing a single page web app with Contentstack is a simple task.

1. Create entries in Contentstack
2. Create a single page app
3. Use APIs to fetch content from Contentstack on the app

1. Create Entries in Contentstack

   Log in to your Contentstack account and follow the below steps:

   1. Create a content type in Contentstack named Single Page App.
   2. Create entries inside this content type.
   3. Publish the content on your desired environment.

2. Create a Single Page App

   1. Open your terminal and create a React project with modern build setup without any configuration by using one of the following command:
      npx create-react-app my-app OR use the following on Windows:npm init react-app my-app

      If you get an error after running either of the above commands, try the following command:npm install -g create-react-app

   2. Create a component that will define all routing using the react-router-dom npm package. If you haven’t installed this package yet, then install it using the following command:
      npm install react-router-dom
      This will install BrowserRouter, Link, and Route component. If you want hash links, you can use HashRouter instead of BrowserRouter.
      
      For a single-page app, we don't want the browser to reload the page. We simply want it to display the required content without loading the page. So for that, we will use the NavLink component. For example,
      

   <BrowserRouter>
      <div>
       <h1>Single Page Web Application</h1>
       <ul className="header">
         <li><NavLink exact activeclassName="active" to="/">Home</NavLink></li>
         <li><NavLink activeclassName="active" to="/product">product</NavLink></li> 
         <li><NavLink  activeclassName="active" to="/ContactUs">ContactUs</NavLink></li>
        </ul>
       </div>
   </BrowserRouter>

   3. Now using the Route component, define which component to render when requested. For example:
      

      <BrowserRouter>
         <div>
           <h1>Simple SPA</h1>
           <ul classname="header">
             <li><Navlink to="/">Home</Navlink></li>
             <li><Navlink to="/product">product</Navlink></li>
             <li><Navlink to="/AboutUs">AboutUs</Navlink></li>
           </ul>
           <Route exact="" path="/" component={Home}/>
           <Route path="/product" component={product}/>
           <Route path="/AboutUs" component={AboutUs}/>
         </div>
      </BrowserRouter>

   Note: Ensure you define NavLink and Route component inside the BrowserRouter component.

   4. Define the components you specified for each route. For example, For the Home component, you can fetch the content from Contentstack inside the ComponentWillMount lifecycle method of the component as follows:

      export default class Home {
          constructor(props){
              super(props);
              this.state ={
              data:’ ’    
      }
      }
      componentWillMount(){
      
      let fetchedData =//fetch content from contentstack
      
      //change state 
      this.setState({
      data:fetchedData
          })
      
      }
      
      render(){
      
          return(<div className="content">{this.state.data}</div>)
      
      }
      }

      Similarly, define all the required components, for example, Contact Us, and Product.
      
      
   5. Lastly, import the created component in step 2 inside the main App.js component.
   6. Now go back to your terminal and run the following commands to see if this set up is working.

      npm install
      npm start

   By default, the app should start on port 3000. For every request, the component defined inside the Route component gets rendered.

3. Fetch Content from Contentstack

   Now use the API request to fetch content from the Contentstack server and display it on the single-page app. For example, for the “Contact Us” component, we have defined the API call as follows:

   

   Similarly, you can define the API calls for other components.

   Once you have set up everything, go to Contentstack and make changes in the entries. You should see the relevant changes in the single-page app.

Sample App

We have created a sample single page app using React as it is an ideal language for creating a single page or apps. It allows you to create components that accept inputs and renders a React element describing how a section of the UI should appear. 

We have created three entries in Contentstack: “Home,” “Product,” and ContactUs.” We have linked it with the single page app built in React and used the API calls to fetch the data.

To download the sample example code, please contact our support team.

Once you download the code, you will see the following folder and file structure:

Then, perform the following steps:

1. Open the terminal and move inside the project directory.
2. Install npm using the following command:npm installThis will install the required npm and required dependencies.
3. Then, start npm using the following command:npm start

The project should start on port 3000 and you should see the following screen