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…
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. …
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.
Our React app will be very basic in nature, it calls an Express.js API with only one
POST route and one
GET route returns “Hello from Express” and the…
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.
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.
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. …
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.
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.
In this tutorial, besides getting started with Vue.js, we will cover the following:
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 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
-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.
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:
Full Stack Software Engineer and avid Brazilian Jiu-Jitsu practitioner