How to deploy a React app with a back-end API. Part 3: Heroku.

Photo by Jakob Owens on Unsplash

In this tutorial, we will learn how to deploy a React app with a back-end API to Heroku. We will cover deploying an Express.js API to interact with the React front-end.

This is part 3 of the tutorial. In part 1 we learned how to deploy the app to Netlify including deploying Lambda Functions, you can read it here. In part 2 of the tutorial we learned how to deploy the app to Vercel, you can read it here.

If you already read part 1 or 2 of the tutorial, you can skip this section and jump right to Heroku


How to deploy a React app with a back-end API. Part 2: Now.

Photo by Jakob Owens on Unsplash

This is now an outdated tutorial. Now has been rebranded to Vercel and with that rebranding came some changes to deploying to this new platform. To read the updated tutorial visit here.

In this tutorial, we will learn how to deploy a React app with a back-end API to Now. We will cover deploying an Express.js API to interact with the React front-end.

This is part 2 of the tutorial. In part 1 we learned how to deploy the app to Netlify including deploying Lambda Functions, you can read it here. …


How to deploy a React app with a back-end API. Part 1: Netlify.

Photo by Jakob Owens on Unsplash

In this tutorial, we will learn how to deploy a React app with a back-end API to Netlify. We will cover deploying an Express.js API and Lambda Functions to interact with the React front-end.

This tutorial will be divided into 3 parts. Part 2 of the tutorial we will deploy the same app to Now and Part 3 to Heroku. (Links below)

Let’s get started

Our React app will be very basic in nature, it calls an Express.js API with only one POST route and one GET route.

The GET route returns “Hello from Express” and the…


A short yet detailed guide to styling components with create-react-app

Up until the release of create-react-app v2, if you wanted to include Sass or CSS Modules in your project, you would have to eject from create-react-app, learn Webpack configurations, install Sass loaders and configure it yourself.

Photo by Vernon Raineil Cenzon on Unsplash

Not anymore. The team at Facebook released create-react-app v2 and among the many improvements, they gave us the ability to use Sass and CSS Modules right out of the box, and in this tutorial you will learn how simple it is to include them in your projects using create-react-app.

Let’s create a simple project to demonstrate this.

Tip: Use Bit to build faster with…


Visit my blog site entry for the most up-to-date tutorial for this article.

Sass is a very popular CSS pre-processor. The intent of this tutorial is to show you how to compile Sass files within Visual Studio using Webpack. Our discussion will include minification and autoprefixing for production.

Visual Studio meets Sass

Sure, there are some plug-ins in the Visual Studio Marketplace, and it can be nice to just install a plug-in and forget about configuration. But what happens if the plug-in is not supported anymore and stops working with newer Visual Studio versions? Well, too bad. …


We all love React, Vue, Angular, [front-end framework]. But, it might be overkill to use them if you just need to build a simple website.

Photo by el alce web on Unsplash

In this tutorial we will be building a website without a front-end framework (🙀) but making use of Webpack to support writing modern JavaScript (ES6+), including ES Modules and Sass.

Features include:

  • Live reload in development
  • Webpack
  • Sass compilation (and minification/autoprefixing in production)
  • ES6+ transpilation (and minification/uglyfication in production)
  • ES Modules

Tip: Use Bit to build apps faster with components. Easily share and reuse components with your team, and use them to build new apps! Give it a try.


Build a secure React app that provides takes advantage of Firebase simplicity to consume OAuth Authentication with GitHub, Twitter and Facebook.

Photo by Micah Williams on Unsplash

For an app to be secure, we usually need to implement some kind of authentication, whether it is the basic username/password combo or a two-factor authentication. In this post we’ll learn how to leverage Firebase to make our app secure and give our users the choice to log in with their preferred social account.

I know we all love code here, but before we jump into coding the app, first we need to create a project in Firebase, then setup new apps on GitHub, Twitter and Facebook. Let’s get started :)

Tip: Use Bit build React apps faster with components…


You’ve heard a lot about Vue.js and how awesome it is, and now you want to use it with your next .NET Core app. Well, it is far easier than you might think.

“fountain pen on black lined paper” by Aaron Burden on Unsplash

In this tutorial, besides getting started with Vue.js, we will cover the following:

  • SASS compilation
  • ES6+ JavaScript transpilation to ES5 with Babel
  • CSS Autoprefixing with PostCSS
  • Minification of our CSS and JS assets

Since this is an introductory Vue.js tutorial, we will be building a simple feedback form that will include full name, email and a comments box.

Tip: Use Bit to share and reuse your components…


Many times we globally install packages then forget how many packages we have installed or that we need to update them.

Below are a set of commands to list globally installed packages and a set of commands to updated them.

npm

To update npm packages we have npm-check. First you will have to install it globally

npm i npm-check -g

Then to list packages that need to be updated

npm-check -gu

We pass -g flag to do a global search, then u flag to update. This will give us an interactive menu where you can move up/down the list of packages…


I have updated this tutorial with Webpack 5, React 17, and Fast Refresh over on my website blog here.

Photo by Max Nelson on Unsplash

In this tutorial we will see the basics of Webpack for React to get you started, including React Router, Hot Module Replacement (HMR), Code Splitting by Route and Vendor, production configuration and more.

Before we start, here’s the full list of features we are going to set up together in this tutorial:

  • React 16
  • React Router 5
  • Semantic UI as the CSS Framework
  • Hot Module Replacement (HMR)
  • CSS Autoprefixer
  • CSS Modules
  • @babel/plugin-proposal-class-properties
  • @babel/plugin-syntax-dynamic-import
  • Webpack 4
  • Code Splitting by Route and Vendor

Esau Silva

Full Stack Software Engineer and avid Brazilian Jiu-Jitsu practitioner

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