Deploying a React Web Application that's created by create-react-app

Introduction

Upon the completion of my React web app that was initially made by create-react-app, I tried to deploy it on Heroku, but it basically seemed a bit difficult. To get some clues for resolving that, as googling has been always the primitive choice, so I did it. Searching resulted in a ton of diverse ideas and methods, including adding some metadata in the package.json, setting a Procfile to incorporating Express server inside the application. Eventually, I learned that those techniques were to some extent antipattern, even so, the core concepts of them were helpful.

Then, I came up with a method that is perfectly in compliance with the patterns and works pretty well, and I already employed it in my app. In a nutshell, it is to put the server and the client/s — in my case, it was a React web app — into two distinct folders, where the client-folder should displace inside the server-folder. Both folders need to have their own package.json which are different, but interrelated.

Figure 1 — Folder-Scheme

Here is a figure of the folder-scheme of my project. As it is shown, the entire client stuff, including folders, necessary files, all in all, are bundled inside the client-folder which itself is inside the main folder beside the server stuff.

Here you can find the content of the two package.json of my project for the sake of explanation of their correlation and how they actually collaborate with each other.

Figure 2 — Server-Side “package.json”
Figure 3— Client-Side “package.json”

“postinstall”: “cd client && npm install && npm run build”,

What it does is after proceeding inside the client directory, Heroku ought to install all the required dependencies and eventually execute the build function of the React project in order to outcome the final material for the browser which is going to be served.

In the end, I want to share my very basic Express server code that serves the React web app of my project.

Figure 4 — Express server

I used Tailwind CSS framework for the sake of simplicity and modernity and in that manner, I made some changes on the interior — the client application — package.json file.

“prestart”: “postcss ./src/tailwind.css -o ./src/App.css”,

In line 19 of figure 3, I used prestart due to the fact that Node systems are sensitive to keywords like “pre” and “post” and for that reason, I meant performing this line to execute priorly.

In my next blog post, I will talk about Next.js which is another framework that aims to simplify the deployment and enabling the react-developer to quickly create a deployable app with React.

--

--

--

Graduate Alumni from AUA

Love podcasts or audiobooks? Learn on the go with our new app.

React Redux Explained

Help Me HelpScout: Updating Conversation Fields

5 steps to switch your Express website from AWS to Oracle Cloud

Dynamic Partition Upsert — SPARK

Introducing SmoreJS: State Management Optimization for Recoil

Launching Projects with Elm and Elixir

Guards Execution Order in Angular

React Redux tutorials for beginners-3

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
Hesamyan

Hesamyan

Graduate Alumni from AUA

More from Medium

Dockerizing React project

How to create a React To-do App (CRUD) with Hooks (2022) — Part 3

This gif is part of the how to create a ReactJs to-do app using hooks in 2022. CRUD. Delete function

Building a Progressive Web App with React 18

How to get started with MERN