- The Movie Database API
- Amazon Web Services (Elastic Beanstalk)
My first, and by far the biggest, problem was Webpack. It’s such a complex tool and has so many various plugins and settings. I probably spent close to half of my time simply trying to get my webpack config set up correctly (and I’m sure there are still many optimizations that could be made).
First, I wanted to make sure there was a clear separation between my back end API and the front end view. Second, I was having issues making API calls on the front end. Since the front and back were running on separate servers/ports, when I was making calls, it was calling the wrong port. Lastly, I was using the webpack dev server to run my front end on port 8080 (the default port for WDS) on one terminal and running my back end Express server on port 3000 on another, but was quickly getting frustrated with having to stop both servers, create a build, then restart the servers to see changes made on the back end.
I was finally able to get Webpack and the Dev Server working as I wanted after a lot of trial and error, reading the Webpack docs and various articles, and watching several videos on YouTube of developers setting up Webpack.
For my first problem, I discovered that when you export your config file for Webpack, you can send it an array of multiple objects, so I used that to my advantage to have it bundle two files - one for the front end and one for the back end. As for the API call issue, I had to go implement proxy settings in the webpack config for the dev server and this fixed the port issue. Finally (and what saved me the most headaches), I was able to resolve the issue. A few minor tweaks to my webpack config, adding nodemon as a dev dependency, and then creating a new start script got everything up and running just how I wanted!
Next, I was getting compile errors with trying to use ES6 arrow functions (something I thought was supposed to be handled by babel’s presets env and react).
A quick Google search and I discovered this was resolved by simply adding a plugin (babel-plugin-transform-class-properties) to the .babelrc file:
I’m pretty happy with how well the app turned out given the short amount of time I was able to spend on it (~15 hours). In the future, I would like to add a few additional features to the application, like seeing related shows/movies and allowing users to login and save favorites and get recommendations based on favorites.
Home Screen/Popular TV Shows
Searching for TV Shows
More Info (TV Show)
More Info (Movie)
One of the biggest lessons I learned is just how much work went into CREATE-REACT-APP and why it is so popular when using React. Still, I’m glad I took the time to really dive into Webpack and Babel and learn as much about it as I did. Also, this is my first project using an external API so heavily and I learned quite a lot from that as well.