create-react-app - freeCodeCamp.org

How to Migrate from create-react-app to Vite using Jest and Browserslist

Saheed Oladele — Fri, 06 Oct 2023 18:01:00 +0000

The React team no longer recommends using create-react-app (CRA) as a bundler to create a new React application. The team and community realized that even though CRA was a jump-starter, it lacked the flexibility needed to configure or manage large and complex applications.

Nowadays, the team recommends using production-grade React frameworks like NextJS, Remix, Gatsby, or Expo for native apps. While frameworks are the preferred choice, the React team also recommend using Vite or Parcel for custom build processes.

This is partly because the CRA package has not been updated for about a year. This may cause some problems where packages already updated to more recent versions cannot be used within an existing application. As a result, you may need to update existing applications by replacing the CRA package with the recommended alternatives — Vite or Parcel.

This article walks you through the steps for migrating a production-based application from CRA to Vite. You will learn the "why" of each step, how to retain Jest for tests, and how to update your browserslist since it doesn't work with vite out of the box.

In the conclusion section, you can find a sample pull request that includes all the changes. At the end of each step, you will find a sample commit text which shows the code change required per step.

Step 1: Install `Vite` and Plugins

Here are the commands to install the packages we need:

yarn add vite @vitejs/plugin-react vite-tsconfig-paths

OR

npm install vite @vitejs/plugin-react vite-tsconfig-paths

Apart from Vite, we are adding two plugins — @vitejs/plugin-react and vite-tsconfig-paths.

The vitejs/plugin-react plugin enables fast refresh in development, uses automatic JSX runtime, and custom Babel plugins or presets. It enriches your React development experience.

The vite-tsconfig-paths plugin resolves imports for TypeScript's path mapping. For example, you can use components/ComponentName instead of ./../components/ComponentName.

Other Vite plugins

Another plugin you could consider is vite-plugin-svgr, which transforms SVG into React components and uses svgr under the hood. I left it out since we do not have such a use case in the application I’m migrating.

You can also checkout other official Vite plugins here.

Step 1 sample commit.

Step 2: Create a `Vite` config file

On running vite in the command terminal, Vite tries to find a vite.config.ts file inside the project's root directory. You can read more on Vite's page for how to further configure this file for intellisense, environment based configurations, async configuration, and env variables usage.

At your application’s root, create a file named vite.config.ts with the following content:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteTsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
    // depending on your application, base can also be "/"
    base: '',
    plugins: [react(), viteTsconfigPaths()],
    server: {    
        // this ensures that the browser opens upon server start
        open: true,
        // this sets a default port to 3000  
        port: 3000, 
    },
})

Step 2 sample commit.

Step 3: Create a `Vite` Types File Reference

This step is needed to reference a type declarations file which aids type checks and Intellisense. By default, Vite types are for a NodeJS environment. For client side code, Vite provides the type definitions in vite/client.d.ts.

At your application’s root, create a file named vite-env.d.ts with the following content:

///

Step 3 sample commit.

Step 4: Move the `index.html` File

Vite has a root directory which your files are served from. Since index.html is the entry point for Vite's server, the file needs to be in the root directory.

From the public directory, move the index.html file to the root of your project.

Step 4 sample commit.

Step 5: Update the `index.html` File

Two updates are necessary here:

Remove `%PUBLIC_URL%`

Vite automatically resolves URLs inside index.html, so there's no need for %PUBLIC_URL% placeholders. You can do a search and replace inside your index.html file for this. Be sure to remove all occurrences.

Before:

<link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />

After:

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

Add module script to the bottom of the body tag

Vite treats index.html as source code and part of the module graph. It resolves


  
    
      
    
  
  
    
      ? Follow Me On Twitter
    
    
      ?️ Subscribe To My Youtube
    
    
      ✉️ Sign Up For My Newsletter



 How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter 
Colby Fayock — Wed, 08 Apr 2020 14:45:00 +0000
 Building maps can be pretty powerful, but often you’re stuck with open source options for the map imagery that might not help the readability of your data. How can we leverage Mapbox’s tile APIs to add a custom basemap to our React Leaflet app?

What are we going to build?
What is Mapbox?
Part 1: Creating a custom Mapbox style
Part 2: Adding a custom TileLayer to React Leaflet
Part 3: Adding a custom basemap to Gatsby Starter Leaflet
Securing your Mapbox key
Want to learn more about maps?


        
What are we going to build?
We’re going to walk through creating a new basic Mapbox style in our Mapbox account. Once created, we’re going to use their Map API to add a custom basemap to our React Leaflet app.

Gatsby Starter Leaflet with Mapbox basemap
For our map, we’re going to use this Leaflet Gatsby Starter I created that will allow you to easily spin up a new mapping app. Before we spin that up though, I’ll walk you through how to add it using only React Leaflet components.
A mapping app?
Yup! Maps are used all around the world to study datasets for geographic locations. They're important tools for scientists and others that are trying to help the world.

Coronavirus (COVID-19) custom map
If you want to learn more about building a map and adding data to it, you can check out some of my other articles first such as creating a Coronavirus (COVID-19) map or a Summer Road Trip map as well as a little bit of inspiration about why Anyone Can Map.
What is Mapbox?
Mapbox is a mapping platform that allows its customers to create custom mapping solutions. They also leverage a variety of APIs that provide powerful capabilities for building map features.

mapbox.com
For our purposes, we’re going to utilize their Map API, specifically their Static Tiles API, to serve a custom map style that we create.
Part 1: Creating a custom Mapbox style
To get the look and feel that we want for our map, it’s important to have a basemap that helps make our data present itself without distractions. Plus, sometimes it’s fun to have a custom map.
Mapbox account
The first thing we’ll need to set up our custom Mapbox style is to have an account. I'm not going to walk you through that process, but you can head over to Mapbox’s website where you can sign up for free: mapbox.com
Creating a new custom style
Creating a new style in Mapbox isn’t as hard as it sounds. While it can get really complex if you want something unique, we can copy one of Mapbox’s default styles to get started.
First, head over to Mapbox’s Studio dashboard by clicking your account link in the top right corner when logged in.

Mapbox Studio
Once we’re on our Studio dashboard, we want to select the New Style button.

Create a new style in Mapbox Studio
After clicking the button, a modal will pop up allowing you to choose a template. You can choose whatever you want here, but I’m going to choose Monochrome with a variation of Dark. And after you’ve selected your template, click the Customize button.

Select and customize a template for a new style in Mapbox Studio
And now we’re dropped into our customization UI.

Mapbox customize style UI
From here, you can really do what you’d like. There are a ton of options to customize your map. It’s a little complex to try to dig in here, but Mapbox provides some resources to try to help you get productive.
Generating a Mapbox token
Once you’re happy with your new style and everything’s published, we want to generate a token that we’ll use for providing access to our Map.
Head on over to the Account section of the Mapbox dashboard.

Creating a new token in Mapbox
Mapbox provides you with a “default” token that you can use in your applications. You're free to use this, but I recommend creating a new token that you can provide a unique name, that way if you ever blow past the free tier of Mapbox, you’ll be able to track your usage.
Additionally, it’s best to keep a separate token for each application, that way you can easily rotate an individual key, without having to update every application using it.
Once you click Create a token, you can set up the key how you’d like, with the scopes and permissions you choose, but for our purposes, you can leave all of the Public scopes checked for our map, which they do by default.

Create a new access token in Mapbox
Configuring our custom endpoint
For this tutorial, we’re going to use Mapbox’s Static Tiles service.

Mapbox Static Tiles Maps API
Our endpoint will look like the following:
https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}@2x?access_token={access_token}
There are a few parameters here we need to understand:

username: this will be your Mapbox account’s username
style_id: this will be the ID of the style you created before
z, x, y: these are parameters that Leaflet programmatically swaps out, so we want to leave them as is
access_token: this is the Mapbox key you created above

To find your username and style ID, we can use the Style URL for our new Mapbox style to get those values.

Finding the Style URL in Mapbox Studio
In my example, my Style URL looks like:
mapbox://styles/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p
colbyfayock is my username and ck8lryjfq0jdo1ip9ctmuhc6p is my style ID.
And once I update my endpoint parameters, the final tilepoint URL will look like:
https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN
Part 2: Adding a custom TileLayer to React Leaflet
When building a map with React Leaflet, your main component will be a  that wraps the entirety of the app. This is what sets up your Map instance for Leaflet.
For our purposes here, we’re going to use the example on the React Leaflet homepage as our starting point.
React Leaflet TileLayer Component
Inside of your  component you include a  component, which defines the imagery of the world that you base your map upon.
The example on the React Leaflet homepage uses a public version of OpenStreetMap as their TileLayer, which is an open source map project created and updated by people all around the world.

  


This gives you a basic map, but we want to swap in Mapbox so we can set up a custom look and feel for our map.
Custom Mapbox TileLayer
To add our custom style, we’ll want to update the url and attribution props of the TileLayer component.
For URL, it will simply be the custom style endpoint we created earlier, so in my example, it looks like:
https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKEN
For attribution, we want to credit Mapbox as the service, so we want to set our attribution as:
Map data © <a href="https://www.openstreetmap.org/">OpenStreetMapa> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SAa>, Imagery © <a href="https://www.mapbox.com/">Mapboxa>
When plugged in to our TileLayer, our code should now look like this:

  


And once we open up our map, we should see our new basemap!

React Leaflet with a Mapbox basemap
See the code!
If you want to see how I did it, check out the diff commit by commit.
The only caveat there is I created an .env.development.local file in the root of my project in which I stored a new environment variable called REACT_APP_MAPBOX_KEY  to store my Mapbox key.
Part 3: Adding a custom basemap to Gatsby Starter Leaflet
I’ve written a few other articles on how to get started with my Leaflet Gatsby Starter, but for this part, we’ll want to have a basic app spun up that we can use to change our TileLayer endpoint.
Setting up our React Leaflet Gatsby app
To get started, check out the instructions on the Starter github:
https://github.com/colbyfayock/gatsby-starter-leaflet
Once you’re ready, you should have a basic mapping app ready to go!

New Leaflet Gatsby app in the browser
Configuring our Mapbox service
The first thing we’ll want to do is add Mapbox as a service in our src/data/map-services.js file.
Taking our custom endpoint URL that we created in Part 1, let’s set up a new object with a name of Mapbox, and with a url and attribution similar to what we did in Part 2.
export const mapServices = [
  {
    name: ‘OpenStreetMap’,
    attribution: '© Using our Mapbox map service
Once you have your Mapbox service set up, all that’s left is to open up the src/pages/index.js file, find the mapSettings object definition, and update the defaultBaseMap property to Mapbox.
const mapSettings = {
  center: CENTER,
  defaultBaseMap: ‘Mapbox’,
  zoom: DEFAULT_ZOOM,
  mapEffect
};

Save that change, refresh the map in your browser, and you should now see your custom basemap style!

Gatsby Starter Leaflet with custom Mapbox basemap in browser
See the code!
If you want to see how I did it, check out the diff with the commit.
The only caveat there is I created an .env.development file in the root of my project in which I stored a new environment variable called GATSBY_MAPBOX_KEY  to store my Mapbox key.
Securing your Mapbox key
Environment variables
Part of most development processes that use individual keys will generally set the keys up as environment variables. Environment variables are configured settings that don’t live in the code itself.
This is important because it prevents your key from being checked in to your code, which is bad from a security perspective, but it also allows you to provide a different key for different environments.
When generating your keys, try to keep this in mind, as it can save you in the long run.
Locking down your Mapbox key
In your settings when creating a token or when editing a token, Mapbox allows you to specify only the URLs you want your key to be accessible from.
Though Mapbox has a generous free tier, you probably want to keep it locked down only to the URLs that you’re using it on. You can create multiple keys, where one could be for public use on your website and one would be for your local development.
This is helpful for instance, where you have a key that will never be used publicly for development purposes, but then you have a key that you deploy with, which can be locked down only to that URL.
If someone grabs your key, they could plug it into their own website and use up all of your free tier, potentially running up your bill!
Want to learn more about maps?
You can check out a few of my other resources to get started:

How to create a Coronavirus (COVID-19) Dashboard & Map App in React with Gatsby and Leaflet
Anyone Can Map! Inspiration and an introduction to the world of mapping
How to Create a Summer Road Trip Mapping App with Gatsby and Leaflet
How to Create your own Santa Tracker with Gatsby and React Leaflet
How to build a mapping app in React the easy way with Leaflet


  
    
      
    
  
  
    
      ? Follow Me On Twitter
    
    
      ?️ Subscribe To My Youtube
    
    
      ✉️ Sign Up For My Newsletter
    
  

 


 Tips to Enhance the Performance of Your React App 
freeCodeCamp — Tue, 27 Aug 2019 13:46:33 +0000
 By Shifa Martin
ReactJS is an open-source framework that facilitates the development of UI interfaces for web and mobile applications. Developers globally use the framework to build state-of-the-art applications which subsequently generate revenues as well as expand the audience for businesses.  
However, building a great UI with React isn’t enough, You’ve got to add that extra glitter to make the app more polished, functional and remarkably better than the competition. 
This is exactly what I’m going to help you with as I describe some key methods to increase performance in React apps.
1. Making good use of Identities
When building mobile apps with React,  it is possible to wrap functions and variables with React.useMemo. Doing so provides the ability to memoize them so they remain identical for renders in the future.  
When functions and variables are not memoized, any references to them might vanish from future renders. Memoizing helps in negating wasteful processes and operations in every situation where you’d leverage functions and variables.
Example: 
Say, we’re preparing a custom hook for a list of urls as arguments. Using the hook, we can collect them into an array of promise objects and resolve them with Promise.all. The results of this accumulation will enter the state and be passed the app component once done. The list of promises now map over the urls array from where it fetches the urls.
import React from 'react'
import axios from 'axios'

export const useApp = ({ urls }) => {
  const [results, setResults] = React.useState(null)

  const promises = urls.map(axios.get)

  React.useEffect(() => {
    Promise.all(promises).then(setResults)
  }, [])

  return { results }
}

const App = () => {
  const urls = [
    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=a',
    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=b',
    'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=c',
  ]

  useApp({ urls })

  return null
}

export default App

Since we want to obtain data from 3 urls here, only 3 requests are supposed to be sent out, one for each url. However,  when looking at it through the inspect element feature on Google Chrome, we find that 6 requests are sent instead of the supposed 3.
This happens because the urls argument did not retain its previous identity. When the app is re-rendered, it’s instantiating a new array each time, as React treats it as a different value.  

To fix this problem, we can use React.useMemo as previously mentioned. When using React.useMemo, the array of promise objects won’t recompute in each new render unless the array with the list of urls changes. As long as it stays the same, the identities remain.
Here’s what happens when applying React.useMemo to this example:
const useApp = ({ urls }) => {
  const [results, setResults] = React.useState(null)

  const promises = urls.map((url) => axios.get(url))

  React.useEffect(() => {
    Promise.all(promises).then(setResults)
  }, [])

  return { results }
}

const App = () => {
  const urls = React.useMemo(() => {
    return [
      'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=a',
      'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?terms=b',
    ]
  }, [])

  const { results } = useApp({ urls })

  return null
}

It will send 6 requests even now since we’ve only memoized the urls array. The promises variables are also instantiating when running the hook. So in order to send only 3  requests, we also have to memorize the promises variables as well.
const promises = React.useMemo(() => {
  return urls.map((url) => axios.get(url))
}, [urls])


After memoizing both the urls array and the promises variables, this is what we get: 


2. Merging Props to Children
At times, developers get into situations where they prefer merging a prop with children before rendering. To facilitate the same, React allows viewing the props to all react elements including others, and also allows exposing their key.
So developers can choose to wrap the children element with a newer one, and insert new props there or they can simply merge the props with React.
Say, we have an app component that uses a useModal and offers the ability to manage modals by using controls such as open, close, opened and activated. Before merging props to children, we can pass them to a VisbilityControl component which provides some additional functionality.
import React from 'react'

const UserContext = React.createContext({
  user: {
    firstName: 'Kelly',
    email: 'frogLover123@gmail.com',
  },
  activated: true,
})

const VisibilityControl = ({ children, opened, close }) => {
  const ctx = React.useContext(UserContext)
  return React.cloneElement(children, {
    opened: ctx.activated ? opened : false,
    onClick: close,
  })
}

export const useModal = ({ urls } = {}) => {
  const [opened, setOpened] = React.useState(false)
  const open = () => setOpened(true)
  const close = () => setOpened(false)

  return {
    opened,
    open,
    close,
  }
}

const App = ({ children }) => {
  const modal = useModal()

  return (
    
      
      {children}
    
  )
}

const Window = ({ opened }) => {
  if (!opened) return null
  return (
    
      I am a window
    
  )
}

export default () => (
  
    
  
)

Using Visibility control allows developers to ascertain whether the control activated is true before allowing the control opened to be used by children. In case the Visibility Control feature is used via a secret route, there’s an option to prevent unactivated users from accessing the content.  
3. Making a larger reducer
It is possible to combine to or more reducer to make a single, much larger reducer that can help boost a react app.
Say, you think of building a large app that provides access to a wide variety of small services. How would you go about the development of such an app? 
There are two options:

We can give each microservice within the app a separate part of its own from where its state and context can be managed directly.  


Or we can combine all states into a single large state and manage all of them within the same environment.  


The first approach seems to highly tedious, so obviously, the second one is the way to go.  

Now we have three reducers to combine - 
frogsreducer.js, authreducer.js and finally, ownersreducer.js.  
Let's start with authReducer.js
const authReducer = (state, action) => {
  switch (action.type) {
    case 'set-authenticated':
      return { ...state, authenticated: action.authenticated }
    default:
      return state
  }
}

export default authReducer

ownersReducer.js

ownersReducer.js
const ownersReducer = (state, action) => {
  switch (action.type) {
    case 'add-owner':
      return {
        ...state,
        profiles: [...state.profiles, action.owner],
      }
    case 'add-owner-id':
      return { ...state, ids: [...state.ids, action.id] }
    default:
      return state
  }
}

export default ownersReducer

frogsReducer.js
const frogsReducer = (state, action) => {
  switch (action.type) {
    case 'add-frog':
      return {
        ...state,
        profiles: [...state.profiles, action.frog],
      }
    case 'add-frog-id':
      return { ...state, ids: [...state.ids, action.id] }
    default:
      return state
  }
}

export default frogsReducer


Now we can put all three into the main app file and define their state:  

App.js
import React from 'react'
import authReducer from './authReducer'
import ownersReducer from './ownersReducer'
import frogsReducer from './frogsReducer'

const initialState = {
  auth: {
    authenticated: false,
  },
  owners: {
    profiles: [],
    ids: [],
  },
  frogs: {
    profiles: [],
    ids: [],
  },
}

function rootReducer(state, action) {
  return {
    auth: authReducer(state.auth, action),
    owners: ownersReducer(state.owners, action),
    frogs: frogsReducer(state.frogs, action),
  }
}

const useApp = () => {
  const [state, dispatch] = React.useReducer(rootReducer, initialState)

  const addFrog = (frog) => {
    dispatch({ type: 'add-frog', frog })
    dispatch({ type: 'add-frog-id', id: frog.id })
  }

  const addOwner = (owner) => {
    dispatch({ type: 'add-owner', owner })
    dispatch({ type: 'add-owner-id', id: owner.id })
  }

  React.useEffect(() => {
    console.log(state)
  }, [state])

  return {
    ...state,
    addFrog,
    addOwner,
  }
}

const App = () => {
  const { addFrog, addOwner } = useApp()

  const onAddFrog = () => {
    addFrog({
      name: 'giant_frog123',
      id: 'jakn39eaz01',
    })
  }

  const onAddOwner = () => {
    addOwner({
      name: 'bob_the_frog_lover',
      id: 'oaopskd2103z',
    })
  }

  return (
    <>
      
        
        
      
    
  )
}
export default () => 

This is what it looks like combining all three reducers into one large reducer, along with rootReducer

function rootReducer(state, action) {
  return {
    auth: authReducer(state.auth, action),
    owners: ownersReducer(state.owners, action),
    frogs: frogsReducer(state.frogs, action),
  }

This is what it looks like combining all three reducers into one large reducer, along with rootReducer.
Using Sentry for Analyzing Errors

Any mobile app development project can benefit greatly from Sentry. It provides everything a developer needs to handle errors and exceptions when building apps with React. Sentry identifies all errors and displays them at one central location so they can be accessed and analyzed all at once.
Getting started with Sentry on React is easy. Just use npm install @sentry/browser and set it up. Once done, developers can log in at sentry.io and analyze all error reports of a project on a single dashboard.
The error reports from sentry are incredibly detailed. They provide all sorts of important information which include the user’s device information, browser, URL, stack trace, how the error was handled, source code, IP address, breadcrumbs to trace the source of error, the error function name and much more.  
5. Using Axios for HTTP requests
Though Axios is commonly used for HTTP requests. I felt it is important to mention this point because it's actually not common for developers to use other request libraries such as fetch for React apps.  
Windows.fetch provides no support for Internet Explorer 11 (most don’t really care though). But for what it's worth, Axios does work there as well and offers the ability to cancel requests in mid-flight.  
Final Words
The 5 mentioned methods can greatly help speed up your React app. It helps developers, the business you’re in and of course, those who’d be using it eventually. But honestly, the success of your React App mostly depends on those who work on them. 
As a consumer, you’d want better performance from your app, so it is what denotes success. As a developer, these methods could make your app easier to develop, and efficiency is key to being more productive. 
ValueCoders is an expert IT outsourcing company for software development. If you are looking for offshore React programmers or hire Android developers, feel free to get in touch. 
Also, I hope this post helps you learn new things and get a deeper insight into what goes into making the perfect react application. 
 


 Create React App Crash Course 
Beau Carnes — Mon, 28 Jan 2019 20:35:38 +0000
 Create React App is a tool that saves you a bunch of time when building React apps. It makes creating React apps easier for beginners and experienced developers by automating time-consuming setup and configuration. You simply run one command and Create React App sets up the tools you need to start your React project.
In this crash course from Ipenywis, you will learn everything you need to know to begin using Create React App for your own React projects.
You can watch the tutorial on the freeCodeCamp.org YouTube channel (22 minute watch).‌
 


 How To Make create-react-app work with a Node Back-end API 
freeCodeCamp — Thu, 21 Dec 2017 00:17:25 +0000
 By Esau Silva
This is a very common question among newer React developers, and one question I had when I was starting out with React and Node.js. In this short example I will show you how to make create-react-app work with Node.js and Express Back-end.
create-react-app
Create a project using create-react-app.
npx create-react-app example-create-react-app-express

Create a /client directory under example-create-react-app-express directory and move all the React boilerplate code created by create-react-app to this new client directory.
cd example-create-react-app-expressmkdir client

The Node Express Server
Create a package.json file inside the root directory (example-create-react-app-express) and copy the following contents:
{
  "name": "example-create-react-app-express",
  "version": "1.0.0",
  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.4"
  },
  "devDependencies": {
    "concurrently": "^4.0.1"
  }
}

Notice I am using concurrently to run the React app and Server at the same time. The –kill-others-on-fail flag will kill other processes if one exits with a non zero status code.
Install nodemon globally and the server dependencies:
npm i nodemon -g
yarn

Create a server.js file and copy the following contents:
const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get('/api/hello', (req, res) => {
  res.send({ express: 'Hello From Express' });
});

app.post('/api/world', (req, res) => {
  console.log(req.body);
  res.send(
    `I received your POST request. This is what you sent me: ${req.body.post}`,
  );
});

app.listen(port, () => console.log(`Listening on port ${port}`));

This is a simple Express server that will run on port 5000 and have two API routes: GET - /api/hello, and POST -/api/world.
At this point you can run the Express server with the following command (still inside the root directory):
node server.js

Now navigate to [http://localhost:5000/api/hello](http://localhost:5000/api/hello), and you will get the following:

We will test the POST route once we build the React app.
The React App
Now switch over to the client directory where our React app lives.
Add the following line to the package.json file created by create-react-app.
"proxy": "http://localhost:5000/"

The key to using an Express back-end server with a project created with create-react-app is to use a proxy. This tells the Web-pack development server to proxy our API requests to our API server, given that our Express server is running on localhost:5000.
Now modify ./client/src/App.js to call our Express API Back-end, changes are in bold.
import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component {
  state = {
    response: '',
    post: '',
    responseToPost: '',
  };

  componentDidMount() {
    this.callApi()
      .then(res => this.setState({ response: res.express }))
      .catch(err => console.log(err));
  }

  callApi = async () => {
    const response = await fetch('/api/hello');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);

    return body;
  };

  handleSubmit = async e => {
    e.preventDefault();
    const response = await fetch('/api/world', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ post: this.state.post }),
    });
    const body = await response.text();

    this.setState({ responseToPost: body });
  };

render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.jscode> and save to reload.
          p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          a>
        header>
        <p>{this.state.response}p>
        <form onSubmit={this.handleSubmit}>
          <p>
            <strong>Post to Server:strong>
          p>
          <input
            type="text"
            value={this.state.post}
            onChange={e => this.setState({ post: e.target.value })}
          />
          <button type="submit">Submitbutton>
        form>
        <p>{this.state.responseToPost}p>
      div>
    );
  }
}

export default App;

We create callApi method to interact with our GET Express API route, then we call this method in componentDidMount and finally set the state to the API response, which will be Hello From Express.
Notice we didn’t use a fully qualified URL [http://localhost:5000/api/hello](http://localhost:5000/api/hello) to call our API, even though our React app runs on a different port (3000). This is because of the **proxy** line we added to the package.json file earlier.
We have a form with a single input. When submitted calls handleSubmit, which in turn calls our POST Express API route then saves the response to state and displays a message to the user: I received your POST request. This is what you sent me: [message from input].
Now open ./client/src/App.css and modify .App-header class as follows (changes in bold)
.App-header {
...
  min-height: 50%;
...
  padding-bottom: 10px;
}

Running the App
If you still have the server running, go ahead and stop it by pressing Ctrl+C in your terminal.
From the project root directory run the following:
yarn dev

This will launch the React app and run the server at the same time.
Now navigate to [http://localhost:3000](http://localhost:3000) and you will hit the React app displaying the message coming from our GET Express route. Nice ?!

Displaying GET route
Now, type something in the input field and submit the form, you will see the response from the POST Express route displayed right below the input field.

Calling POST route
Finally take a look at at your terminal, you will see the message we sent from the client, that is because we call console.log on the request body in the POST Express route.

Node
Production Deployment to Heroku
Open server.js and replace with the following contents:
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
const port = process.env.PORT || 5000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// API calls
app.get('/api/hello', (req, res) => {
  res.send({ express: 'Hello From Express' });
});

app.post('/api/world', (req, res) => {
  console.log(req.body);
  res.send(
    `I received your POST request. This is what you sent me: ${req.body.post}`,
  );
});

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use(express.static(path.join(__dirname, 'client/build')));

  // Handle React routing, return all requests to React app
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  });
}

app.listen(port, () => console.log(`Listening on port ${port}`));

Open ./package.json and add the following to the scripts entry
"start": "node server.js",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"

Heroku will run the start script by default and this will serve our app. Then we want to instruct Heroku to build our client app, we do so with heroku-postbuild script.
Now, head over to Heroku and log in (or open an account if you don’t have one).
Create a new app and give it a name

Create new app on Heroku
Click on the Deploy tab and follow the deploy instructions (which I think they are pretty self-explanatory, no point on replicating them here ?)

Deploy an app to Heroku
And that is it, you can open your app by clicking on the Open app button at the top right corner within the Heroku dashboard for your app.
Visit the deployed app for this tutorial: https://cra-express.herokuapp.com/
Other Deployment Options
I write about other deployments options here:

Netlify
Now
Heoku (more in-depth explanation)

Project Structure
This will be the final project structure.

Get the full code on the GitHub repository.
Thank you for reading and I hope you enjoyed it. Any question, suggestions let me know in the comments below!
You can follow me on Twitter, GitHub, Medium, LinkedIn or all of them.
This post was originally posted on my personal blog website.

Update 8/25/19: I have been building a prayer web app called "My Quiet Time - A Prayer Journal". If you would like to stay in the loop please sign up through the following link: http://b.link/mqt  
The app will be released before the end of the year, I have big plans for this app. To see some mockup screenshots follow the following link: http://pc.cd/Lpy7
My DMs on Twitter are open if you have any questions regarding the app ?

create-react-app - freeCodeCamp.org

How to Migrate from create-react-app to Vite using Jest and Browserslist

Step 1: Install Vite and Plugins

Other Vite plugins

Step 2: Create a Vite config file

Step 3: Create a Vite Types File Reference

Step 4: Move the index.html File

Step 5: Update the index.html File

Remove %PUBLIC_URL%

Add module script to the bottom of the body tag

How to set up a custom Mapbox basemap style with React Leaflet and Leaflet Gatsby Starter

What are we going to build?

A mapping app?

What is Mapbox?

Part 1: Creating a custom Mapbox style

Mapbox account

Creating a new custom style

Generating a Mapbox token

Configuring our custom endpoint

Part 2: Adding a custom TileLayer to React Leaflet

React Leaflet TileLayer Component

Custom Mapbox TileLayer

See the code!

Part 3: Adding a custom basemap to Gatsby Starter Leaflet

Setting up our React Leaflet Gatsby app

Configuring our Mapbox service

See the code!

Securing your Mapbox key

Environment variables

Locking down your Mapbox key

Want to learn more about maps?

Tips to Enhance the Performance of Your React App

1. Making good use of Identities

2. Merging Props to Children

I am a window

3. Making a larger reducer

Using Sentry for Analyzing Errors

5. Using Axios for HTTP requests

Final Words

Create React App Crash Course

How To Make create-react-app work with a Node Back-end API

create-react-app

The Node Express Server

The React App

Running the App

Production Deployment to Heroku

Other Deployment Options

Project Structure