About the Author

Nick Crum

Software Engineer

Published
in Development 4 min read

Getting Started with React and Broadleaf

For the past few months, we have been dedicating time to developing a brand new starter project for developers. This all started out as a side project of mine when I had the desire to prove that Broadleaf's API can be used effectively with frontend technologies like React. I am excited to introduce the culmination of those efforts with Broadleaf's React Starter and show how you can download are start building your own eCommerce application powered by React and Broadleaf!

Why do this?

This starter project did not start out as a starter project. In fact, it started out as my own personal side project to see how well I could build a React application that uses Broadleaf's API. I had some experience with React and Angular from side projects before this, but this was a real opportunity to solve some complex real world problems. My original motivation was to learn, have fun, and prove that Broadleaf, which traditionally relied on Spring MVC and server-side templating engines like Thymeleaf, could be utilized in a modern single-page application.

After a while of working on the application in my free time, it started to take shape. I showed off my "prototype" to some coworkers and found people were actually pretty excited about it. Shortly thereafter, it was decided that I should dedicate time during work to put together a full functioning React Starter. This was very exciting for me because suddenly something I did for fun in my free time became something I do for fun and get paid for. Now that the project has come together, I'm very exciting to share this with the world and see what people can do with it. Building eCommerce applications with React and Broadleaf is a ton of fun, and I hope you will walk away from this with the same excitement I feel.

How do I start?

Getting started with Broadleaf's React Starter is fairly easy. Follow my steps and you shouldn't have too many issues in getting your environment up and going. I promise this is the most boring part of this and it will get a lot more exciting when you get your environment setup.

The Code

You can download or clone the React Starter from it's github repository at https://github.com/BroadleafCommerce/ReactStarter.git.

	git clone https://github.com/BroadleafCommerce/ReactStarter.git

Install Stuff

If you have never used Broadleaf before, you will need to be sure you have Java 8 and Maven installed. I would highly suggest refering to Broadleaf's Running Locally document to figure out everything you need for running Broadleaf in your environment.

For this project in particular, you will need to install NodeJS and Yarn. If you are using a Mac like I am, you can install yarn using Brew:

	brew install yarn

Once you have NodeJS and Yarn installed in your environment, you need to install the dependencies for your site application. This can be easily done by navigating to ReactStarter/site and running the command yarn. After a minute the dependencies should be installed to the node_modules directory in your site project.


    cd ReactStarter/site


    yarn

In addition to the NodeJS project, you will also want to install the dependencies for the maven projects api and admin. To do this you simply need to run mvn clean install within the ReactStarter root directory.

Starting Up

Now that you have the code and installed the dependencies you can finally start everything! The most important thing is that you start the api application BEFORE you start the site application.

Start up the api project by navigating to its directory and running the command mvn spring-boot:run. After a couple minutes your API should be up and running on port 8082. To test if it is up and running, try visiting the Swagger documentation at http://localhost:8082/api/v1/swagger-ui.html.

Once the api application is going, start up your site application by navigating to its directory and running the command yarn dev. After a few seconds webpack should finish bundling up the javascript and open your default browser to http://localhost:3000.

Assuming all went well you should now be viewing your own eCommerce single-page application running on React and Broadleaf!

Conclusion

Now that you have your React application up and running, take some time to look through the code and experiment with making changes to different components. If you are new to React I highly recommend going to React’s site and going through the getting started material. In addition, both React Router and Redux have some good tutorials and documentation if you are looking to learn React further.

In the next blog on Broadleaf and React, we will be developing some routes and components to leverage more of Broadleaf’s API!