ad
ad
Topview AI logo

React App creation and setup | Sitecore JSS Tutorial for beginners | Part 02 #sitecore

Science & Technology

Introduction

Welcome to Code Diaries, your ultimate guide to digital experience excellence. This is part two of our headless website series. In this article, we will walk through the process of creating and setting up a React app in the context of Sitecore JSS (JavaScript Services).

Introduction

In previous videos, we covered the prerequisites required for Sitecore headless development and the installation of necessary packages. We created the headless site and established a basic headless website. In this article, we will outline the prerequisites needed for creating a React app, and how to set up that app for both connected mode and integrated mode.

By the end of this guide, your React app will be set up without components and data.

Prerequisites for React App Creation

Before diving into the React app creation, ensure you have the following prerequisites:

  1. Node.js: This is required to run the React app on your system. Download the pre-built installer from the official Node.js website.
  2. Git: Although optional, it is highly recommended to download Git as it will be useful for linting checks later in the process.

Creating the React App

Once the prerequisites are installed, we can start with the React app creation:

  1. Open PowerShell as Admin: Launch PowerShell with administrative privileges.
  2. Navigate to the desired folder: Choose the folder where you want to create your React app.
  3. Install Sitecore JSS CLI Globally:
    npm install -g @sitecore-jss/sitecore-jss-cli
  4. Create the React App: Run the following command:
    npx create-sitecore-jss my-sitecore-demo
    • When prompted, choose the directory for your new app (e.g., D:\my-sitecore-diaries\react).
    • Opt for using the pre-push hook for linting.
    • Enter your Sitecore application host name.
    • For fetching layout and dictionary data, select REST APIs.

Once you submit these details, the necessary React packages will be installed.

Configuring Connected Mode

Next, we will configure the React app for connected mode:

  1. Set Up JSS Configuration: Execute:

    jss setup
    • Provide your Sitecore host name and import service API key from your Sitecore settings.
    • If a field is empty due to a typo, like mistakenly typing 'T' instead of 'y', correct it manually in the jssconfig.js file.

  2. Adjust Configuration Files:

    • Navigate to your app directory and alter necessary configurations according to your setup.
    • Ensure to comment out unused app registrations if you are using SXA.

  3. Deploy to Sitecore: Use the command:

    jss deploy config

    This deploys your configuration to Sitecore.

  4. Start the React App: Start your app with:

    jss start connected

    Check the network tab in your browser’s developer tools to confirm that the app is connected to Sitecore and fetching data correctly.

Configuring Integrated Mode

For integrated mode, follow these steps:

  1. Navigate to the Site Grouping Item: Access the item in Sitecore corresponding to your app.

  2. Configure Target Host Name: Set the target host name as per your requirements.

  3. Create Production Build: Run:

    jss build

    This generates a production build of your React app.

  4. Deploy the Build: Copy the built files into your Sitecore instance within the appropriate folders.

  5. Test the Application: Once deployed, navigate to the host name in your browser to confirm that your React app is loading within Sitecore.

By completing these steps, you will have a fully operational React app in both connected and integrated modes, ready for development and testing.

Conclusion

In this tutorial, we successfully created and set up a React application using Sitecore JSS. In the upcoming video, we will explore the creation of templates, data items, and renderings in Sitecore, as well as component creation in React, building on what we learned in previous installments.

Thank you for following along! If you have any questions, feel free to post them in the comments or reach out through the provided email. Don’t forget to subscribe for updates on the latest tutorials.

Keyword

  • React App
  • Sitecore JSS
  • Connected Mode
  • Integrated Mode
  • Node.js
  • Git
  • Deployment
  • Configuration
  • Templates
  • Development

FAQ

Q: What is Sitecore JSS?
A: Sitecore JSS is a framework that enables the development of modern JavaScript applications using Sitecore as a back-end content management system.

Q: What are the prerequisites for creating a React app in Sitecore?
A: You need Node.js and Git (optional) installed on your system.

Q: How do I configure my React app for connected mode?
A: Use the jss setup command to input your Sitecore instance information and API key, then start the app using jss start connected.

Q: What is the difference between connected mode and integrated mode?
A: Connected mode retrieves live data from Sitecore while integrated mode is more about deploying your React app into the Sitecore environment for production purposes.

Q: How can I participate or ask questions about this tutorial?
A: You can leave your questions in the comments section or email us directly.