Was this article helpful?
Thanks for your feedback
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.
Managing a single page web app with Contentstack is a simple task.
Log in to your Contentstack account and follow the below steps:
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
npm install react-router-dom
<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>
<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.
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.
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.
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.
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:
npm install
This will install the required npm and required dependencies.npm start
The project should start on port 3000 and you should see the following screen
Was this article helpful?
Thanks for your feedback