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.
I want to dedicate a post to show you how to set up Gulp and in particular, a set up for React v0.14 and up. I also focus on doing this in ES2015 (ECMAScript 6 or ES6). I have seen countless threads of people having trouble getting over this initial but important phase.
If you are looking to set up react with webpack, have a look at a detailed post I wrote on react + webpack. It includes things like hot module replacement.