Prepare

Server Side

Before doing the integration, we make some preparations, including:

• Store front-end (client) & back-end (server) in one folder

• Install package Concurrently

  npm i concurrently
  

• Install package CORS

  npm i cors
  

• Add code below inside index.js file server/index.js

  const port = 5000;
  
  app.use(express.json());
  app.use(cors());

• Add code below inside package.json file server/package.json

  "scripts": {
    "start": "nodemon server.js",
    "client": "npm start --prefix ../client",
    "dev": "concurrently \"npm start\" \"npm run client\""
  },

• Run this code:

  npm run dev
  

Client Side

Axios

A promise based HTTP client for the browser and Node.js

• Install Package Axios
  

  npm install axios

• Create API config in client side client/src/config/api.js

  import axios from 'axios';
  
  export const API = axios.create({
    baseURL: 'http://localhost:5000/api/v1/',
  });
  
  export const setAuthToken = (token) => {
    if (token) {
      API.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    } else {
      delete API.defaults.headers.commin['Authorization'];
    }
  };

React Query

React query is a collection of hooks for fetching, caching, and updating asynchronous state in React.

For more info about react-query please refer to this link

• Install Package react-query

  npm i react-query

• Init QueryCLient and QueryClientProvider client/src/index.js

  • Import QueryClient and QueryClientProvider :

    import { QueryClient, QueryClientProvider } from 'react-query';

  • Init Client :

    const client = new QueryClient();
    
    ReactDOM.render(
      <React.StrictMode>
        <UserContextProvider>
          <QueryClientProvider client={client}>
            <Router>
              <App />
            </Router>
          </QueryClientProvider>
        </UserContextProvider>
      </React.StrictMode>,
      document.getElementById('root')
    );