Estimated reading time:
Welcome to the Sitecore.React getting started guide. In this guide we will walk through getting webpack setup and the structure of our site. Over the next few tutorials we will build the front end site and then bring it all over to Sitecore!
All the code for this tutorial can be found here: https://github.com/GuitarRich/sitecore.react.tutorial/tree/getting-started-1.
For this tutorial you need to have the following installed on your machine:
I am also going to assume a level of knowledge on webpack and reactjs. If you want to find out more on webpack - take a look at the getting started guide here. You can get some good info on reactjs here.
This tutorial will be based around how we can create the sitecore.react.project sample project. For those of you that have cloned it already, the repo is not fully complete yet. I will do my best to get the serialized items and the readme updated asap.
There are a few main components of a Sitecore.React web application. For the purposes of this tutorial we will assume that you are building a full web application with React. If you are just using it for a few components and mixing that up with standard MVC Controller and View renderings, the basics are still the same, just without the main front end application part.
- fed.js: This is the main source for the react front end application. It will be where we setup react, the FED router and our application that runs outside of Sitecore
The front end react site will also conform to some standards to make the transition of the react files to Sitecore seamless.
- First, we will setup a static data store that the front end team can use to populate the react site with content before it is delivered by Sitecore. The structure of each data model should be defined and agreed up by both front and back end teams.
- The front end team will use a Sitecore placeholders module and the locations of the placeholders should also be agreed upon with input from Sitecore developers.
It should become clear when going through the tutorials where each part fits in, so lets get on with configuring webpack and creating the obligatory Hello World application!
First lets create a directory, initialize npm and install webpack locally. For this tutorial we will assume you start in
Now we want to setup our project structure. The finished project will have the following folder structure:
src/App folder will contain all the React components.
src/Project contain all the helix modules for the project.
To setup webpack we use the
webpack.config.js file in the root of the project. Create this file and we will configure it like this:
Lets break that down, most of it is a pretty standard webpack config. The bits to notice are:
Here we are defining 3 entry points for webpack. This tells webpack that we are using those 3 files as our source for bundling. We have 3 seperate files for all
Sitecore.React projects. These are the same files mentioned earlier:
We will create these files in the next step.
This section just defines the output files generated by webpack. Using
[name] means that it will generate 3 files that match the entry files names with
It’s not the purpose of this tutorial to teach how to write a reactjs application. There are plenty of resources already out there for that. What we will do is use the sitecore.react.project
Now we can start with out react application. The application is made up of the main entry point - this sets up the react router and some routes.
Make sure that your
package.json file contains the following devDependencies:
npm install in the root of your project.
Next lets create our
Now create the file
fed.js in the
src/App folder. We will import jQuery globally and add in React and the React Router:
Now we can initialize the react application and render it to the div we created earlier:
As a final step - lets enable the webpack dev server. Open your
package.json file and add the following entry to the
Finally we will run
npm run dev in the console. This will run the webpack dev server on port 8080. Now in your browser go to http://localhost:8080/ - if everything has worked you should see the hello world text being rendered by react:
In the next tutorial we will start creating React components and learn how to setup placeholders.
This is the first article in a series of tutorials on Sitecore.React:
- Sitecore.React - Getting Started - 1. Webpack
- Sitecore.React - Getting Started - 2. Creating Components
- Sitecore.React - Getting Started - 3. Data
If you have any questions - feel free to hit me up on Sitecore Slack - my user is @GuitarRich!