React: Building and Deployment

 Introduction to Webpack

In Bootstrap, we used NPM scripts to build our projects distribution files. We used the scripts and third party libraries for concatenation, minification, uglification, and compression of the project files.

Create-react-app comes with a utility that can handle all this and more: Webpack

Webpack is called a module bundler:

“At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.”

Webpack looks at the entire structure of your application then figures out how to package your modules into the most efficient bundles.

Webpack works with JavaScript and JSON files – but can be configured with “loaders” that will transform other types of assetss (HTML, CSS, media, etc) such that they can be treated as JavaScript modules so it can handle all your project’s files.

Webpack will perform concatenation, miniification, uglification, compression of your files and also bundle them in a way most optimized for transfer from server to client, using chunk loading, prefetching, etc.

Webpack’s purpose is to optimize your project’s performance and load times.

Building and Deploying Your App

• Build your React application using react-scripts to create a distribution folder.
• Deploy your application to a server by copying the build files to your server.

Check for warnings

• Before building for deployment, check for and deal with any warnings that you see when you run yarn/npm start.
• EXCEPTION: If you see the following warning (triggered by react-redux-form), it is fine to ignore it:

Imported JSX component text must be in PascalCase or SCREAMING_SNAKE_CASE 

Build the distribution folder

• Use Yarn to build the distribution folder containing your React application using the following command:  yarn build
• This should build a distribution folder named build containing all your application files.

Deploy your React application locally

• To deploy your React application you need a server. Fortunately, we already have the json-server available on our computer.
• Copy the contents of the build folder into the public folder of your json-server. (The contents of the build folder, not the build folder itself.)
• Make sure your json-server is running!
• Now your React application can be accessed at the link http://localhost:3001/. Note that this is a local deployment for testing purposes and is not accessible outside of your own computer.

Deploy a React application on the web

• If you have access to a server on the cloud or any web hosting platform, you will be able to copy the contents of the build folder to the server side to deploy your React application. The exact procedure depends on the web hosting provider that you choose to use. Please consult their documentation.

Deploy to Netlify

• Create or login to Netlify and go to the Sites tab.
• Disclaimer: Netlify offers a free tier, which is useful for small sites and personal projects. If you exceed their limits, you may incur a charge. It is up to you to read about and understand the limits of their free tier.
• Drag and drop the build folder where it says “Drag and drop your site folder here”.
• You’re done! Click on the link generated to see it.
• Netlify will automatically generate a random subdomain for your site, such as https://stupefied-ramanujan-cc8a53.netlify.app — you can change this by clicking “Site Settings” then “Change Site Name”.

Manual deployment vs. continuous deployment

• This example showed a basic approach using drag-and-drop manual deployment of a pre-generated build folder, as you did in the previous exercise with json-server. Once you upload your build folder to Netlify, it handles the server part for you.
• If you update a site locally then wish to update it on Netlify, you can manually deploy once again by running yarn run build then drag-and-dropping the new build folder in the “Deploys” tab for your site on Netlify.
• Netlify also offers what’s called a continuous deployment option that you can automate to retrieve your source code from Github and build it for you on their server. You may wish to explore this option on your own. See the link in the Additional Resources.

Netlify vs. Other Platforms

• Netlify is far from the only cloud platform that can host your Bootstrap site, but it does offer what is possibly the easiest deployment option. It may not be suitable for all of your projects. Others you may wish to research are Github Pages, Vercel, Heroku, AWS, DigitalOcean, Firebase, and more. Each has its own unique instructions for setup and deployment, as well as set of features and supported technologies.

Additional Resources:

• Webpack – Concepts
• Freecodecamp – An Intro to Webpack
• The Self Taught Programmer – What Is Webpack and Why Should I Care?
• Sitepoint – A Beginner’s Guide to Webpack 4 and Module Bundling
• Create-React-App – Deployment
• React-Scripts
• 8 Ways to Deploy a React Site for Free
• Host a React-Based Website Free of Cost with Firebase Hosting
• Hosting a React App for Free Using Github Pages
• Netlify – Deploy with Git