Backend Xpert
Published in

Backend Xpert

Tutorial #4 — Live Project Discussion and Front-End Setup

Webpack (universal choice for front-end bundling)

Part 01: Blog Management System

  • User Registration & Login
  • Blogs Management: (mark as read, track progress, review/recommend etc.)
  • Notifications (automated email etc.)

Part 02: Setting up the Client Side

proxy=http://<username>:<password>@<proxy-server-url>:<port>
https-proxy=https://<username>:<password>@<proxy-server-url>:<port>
package.json
$ npm install <package-name> --save. (To save it to dependencies)
$ npm install <package-name> --save-dev (To save it to development-dependencies)
webpack.common.js
  • entry : Describes the entry point of the app as from being ./src/index.js , which we will create afterwords. Use babel-polyfill for emulating ES2015 environment (for older browsers). To dig deeper into polyfills, readers can refer this article.
  • module : Describes various rules (file types and how to handle them). Each rule has an appropriate loader with additional options describing how to handle the code present in the respective file type. e.g. for all js/jsx files, code has to go through the babel-loader . Similarly for other file types, we have other loaders.
webpack.dev.js
  • mode : ‘development’ indicates webpack that the settings here are purely to be used during development.
  • optimization : Optimization settings such as minimizer (TerserPlugin is the default minimizer), dead-code elimination by not bundling unused exports (usedExports: true), merge duplicate chunks, etc. For more extensive options, refer here.
  • output : Defines the output configuration. Here we set publicPath to / indicating bundle code will be loaded at <root-url>/. e.g. setting publicPath: /home will load client side code at http://localhost:8080/home . filename and chunkFilename is set to [name]-[hash].js because each time webpack bundles code, it generates a new hash which it appends to each js file name. e.g. js-4ad910306c03c.js .
  • devServer : Settings for webpack-dev-server. (more about devServer in next section). compress: true serves gzip compressed code. stats: errors-only shows only errors during watching changes. historyApiFallback: true allows fallback to index.html in case a 404 error occurs (Read more about history API and fallback here).
  • plugins : We are using HtmlWebpackPlugin which is especially useful for webpack bundles that include a hash in the filename which changes every compilation, as in ours.
.babelrc (Babel Configuration File)
directory structure (front-end)

Part 03: Important npm scripts & packages

start: webpack-dev-server --open --config webpack.dev.js
build: webpack --config webpack.prod.js
  • Babel packages: Babel is a JS transpiler mainly used for converting ES6 syntax code to JS code that browsers are able to process (ES6 code involves arrow functions, spread operator, let-const etc). However, it also can do other amazing things based on the presets. e.g. (dynamic import ~ code splitting), reducing lodash bundle size etc.
  • Webpack packages: Webpack packages serve the purpose of bundling code. devServer and merge has already been explained. Bundle-Tracker is useful to generate stats and most importantly publicPaths to js bundles required in production. It’s role can be better understood when we will cover serving production code and django-webpack-loader. Bundle-Analyzer is a package used to profile and observe bundle size statistics. An example output is shown below:
webpack-bundle-analyzer
  • material-ui packages: The main open-source React UI framework used to develop our application.
  • axios: Promise-based API client for making network requests. (GET, POST etc.)
  • connected-react-router, react-router-dom, history: Libraries required for client-side routing. History object stores the current location, match and parameters during routing from one page to another.
  • react: Doesn’t need explanation I think 😄
  • redux, react-redux: Global State Management library and it’s bindings with React Components. Redux is all about having a single source of data. Components subscribe to changes in the store, and interact with it by dispatching actions. Redux has a lot of things to discuss about and thus requires a seperate post (coming soon).
  • redux-saga: Side-effects management library used in conjunction with Redux. (mainly used for network API calls or any other asynchronous tasks). Redux-Saga too requires a seperate post (coming soon) for a proper understanding of its underlying principles (saga pattern).

Our series of tutorials are currently organized at — srplabs.in

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store