Our typical problem arises when we wish to incorporate an API into our mobile app. Consider the situation in which you need to create a mobile app for an existing system. The system was one monolithic solution that exposed an API that exclusively served the web client.

The client’s proposal is not restricted to new mobile apps, but he also considers voice assistants and third-party services that will utilize our API. Hence, one API must handle all these types of clients, and we must take care of their requirements and maintenance.

The Backend for Frontend pattern can be of helping hand in this situation.

Backend for Frontend (BFF) Design Pattern:

Now, Consider the user-facing application to have two components: a client-side application located outside your perimeter and a server-side component (BFF) located within your perimeter. BFF is an API Gateway variation but adds an extra layer between microservices and each client type independently. It replaces a single point of entrance with many gateways. As a result, you may have a customized API that caters to each client’s demands (mobile, Web, desktop, voice assistant, etc.) and eliminates a lot of the bloat created by putting everything in one place. The graphic below depicts how it works.

Why BFF?

The advantage of this architecture is that it allows you to optimize each backend for the unique requirements of different client types, which can lead to better performance and a more tailored user experience. It also improves maintainability and code separation. However, it does introduce some complexity in managing multiple backend services.

The BFF can benefit from masking unneeded or sensitive data before transmitting it to the frontend application interface, allowing keys and tokens for third-party services to be saved and used directly from the BFF.

We can maintain and upgrade APIs more quickly and even give API versioning to specific frontends. This is a significant bonus for mobile apps because many users do not update the app immediately.

Allows for the transmission of formatted data to the front end, allowing for the reduction of logic.

Decoupling the backend and frontend allows us a faster time to market because frontend teams can have separate backend teams serving their unique requirements, and the release of new features in one frontend has no effect on the other.

Furthermore, provide us with opportunities for performance enhancements and mobile optimization.

Remember that BFF architecture is only one approach, and whether it is appropriate for your project is up to your individual requirements and restrictions.

Conclusion

A design pattern called Backend for Frontend was developed with the user and their experience in mind, as well as the developer and their needs. It answers the ever-growing adoption of applications to meet, interact, and serve customers. It ensures consistency while addressing their wide range of changing conditions.

When you think of creating a new React application, the first thing that may come to mind is creating it with command-line interface (CLI), which allows you to run the create-react-app command to set up your project. The create-react-app helps you to create projects easily with minimal effort and configuration.

If you only want to focus on React, the create-react-app is all you’ll need to create a React boilerplate with the entire required configuration, but the create-react-app is best suitable for small projects and it’s not always enough for larger, more complex applications, such as this application you’ll be creating. Instead, you’ll want to use Webpack 4 and Babel to create your React application.

How to Get Started

Before creating a React application with Webpack 4, you should have the Node Package Manger installed in your system. If not, you can do it from here.

Understanding Webpack 4
A webpack is a static module bundler for modern JavaScript applications. Simply, a webpack is a module bundler that lets us bundle our project files into a single file for production. In a webpack, you have control of the development environment and can setup your configurations per your needs.

Project Initialization
First, create a project folder with the name “react-webpack-demo.”

Next, you’ll need to initialize your project with the help of the Node Package Manager. For project initialization, simply enter the below command in the terminal.

This command will ask you few questions, but you can skip them by hitting the “enter” key or fill in the needful details of the project and proceed. You’ll now see a new file named “package.json” in the folder structure. It should look like this:

Use the command below if you want to skip all the questions:

Create the Boilerplate

Now that you’ve initialized the project, there are several technical items you need to install and run.

Webpack

Install the Webpack with the following command:

–save-dev (“-D”) is used to save packages as a development dependency. This will add the Webpack and the Webpack-cli as a dev dependency to our project.

Installing React

React and the React-dom needs to be installed as a dependency with the following command:

Installing Babel:

React works with ES6 and JSX, but you need to install Babel to convert the ES6/JSX code to JavaScript code so that the browser understands it. Install “babel-core,” “babel-loader,” “babel-preset-env,” and “babel-preset-react” as a dev dependency by following the command below:

You can also view the definitions of the commands below:

• Babel-core: Transforms ES6 code to ES5.
• Babel-loader: Webpack helper to transpile code.
• Babel-preset-env: Preset which helps Babel to convert ES6, ES7 and ES8 code to ES5.
• Babel-preset-react: Preset which Transforms JSX to JavaScript.

Index.js

Next, create the index.js file. This file will be the entry point to your app and must be created inside the root of the “/src” folder. Next, add the following line code inside:

Index.html:

You must also create an index.html file inside the root of the “/src” folder and add the following code inside:

Webpack Loaders

Now you need to create a webpack.config.js file in the root directory of the project so that you can define the rules for your loaders. You need to define the entry point and output directory of your app inside this file. Add the following lines of code inside this file.

In the above code, you can see Babel-loader is used to load your JSX/JavaScript files, the css-loader is used to load and bundle all CSS files into one file, and the style-loader will add all styles inside the style tag of the document. The webpack will bundle all the JavaScript files into index-bundle.js inside the “/dist” directory. Learn more about Webpack Loaders here.

Before the webpack can use the css-loader and style-loader, you must install them as a dev-dependency.

.babelrc

Create a .babelrc file inside the root of the project directory with the following content inside:

This file will tell the Babel which pre-sets to use when you’re transpiling the code. You will use these two pre-sets:

• env: This preset is used to transpile the ES6/ES7/ES8 code to ES5.
• react: This preset is used to transpile JSX code to ES5.

Compiling files using Webpack:

Add the following lines of code inside the scripts object located in the “package.json” file as below:

You can now compile the project using the below command:

Now you can see the main.js file created under the “/dist” directory after executing the above command. This will contain the transpiled ES5 code from the index.js file.

App.js:

Now you’ll create an app.js file inside our “/src” folder with the following contents inside:

App.css:

You can now create an App.css file inside the “/src” folder with the following content inside:

You will use this file to ensure the css-loader and style-loader are working correctly. You can now modify the index.js file that we created earlier to contain following lines of code:

html-webpack-plugin

You also need to install html-webpack-plugin. This plugin generates an HTML file, injects the script inside the HTML file, and writes this file to dist/index.html.

Install the html-webpack-plugin as a dev-dependency by running the following command:

Now, configure this plugin inside the webpack.config.js file by adding the following lines of code inside:

The value of the template key is the index.html file that you created earlier. It uses this file as a template and generates a new file named index.html inside the “/dist” folder with the script injected.
Now that the setup is almost compete, all that’s left is to compile the source files using webpack. You can run the project using the command below:

You will get the output inside the “/dist” folder of our project. After opening the index.html in a web browser, we can see the text “My React App!” inside of it.

However, approach has a drawback. You have to manually refresh the webpage to reflect your changes. You can install the webpack-dev-server to have the webpack watch your changes and refresh webpage whenever any change is made to your component.

Installing webpack-dev-server

You need to run the command below to install the webpack-dev-server as a dev-dependency:

Open the webpack.config.js file and add the lines below:

Now run the below command in the terminal:

You should see the browser window open and display the content just like the screenshot below:

Creating Your Own Application is Simple

And there you have it! You can create your own React boilerplate with these different steps and use this to create more React projects. This is only a starter to help familiarize you with Webpack concepts and a lot can be improved over moving to actual production. I hope you are excited to learn more ways of doing things with Webpack 4 and Babel. For more information on these technical processes, contact our experts today.