In this post I will show you how to build and understand a webpack config file for developing applications with react, react–router and redux. I also provide a boilerplate to start developing right away.
If you already know how to set up webpack and wish to learn more on building and understanding react apps, see this post. It includes setting up hot module replacement in react components.
This post is an update to my old tutorial on how to start writing ES6 on the front end with babel.
A league of legends fan application I created. It searches the last 10 ranked matches played by the player searched and orders them by best match to worst.
The application is made with:
- MongoDB to save searched matches temporarily,
- Nodejs with Express in the back end,
- Riot Games RESTful API to search data about the matches,
- React + Redux + React router for the front end logic,
- Sass for styling.
I set up an EC2 t2 micro instance from Amazon Web Services and launched the app around December 2015.
It received huge traffic in new years eve due to a reddit post I made in the /r/leagueoflegends subreddit.
It was crazy to see all the people going to my site. Every 10 min I would check google analytics to see how many users were viewing at the moment, 100, 200, 300 concurrent users, the numbers kept going up. I was happy to see how well the t2.micro instance performed. I kept the server light: It’s basically a proxy between the riot servers and the client. Later on I added some code to consume the API better, and only send what’s necessary to the front end.