How To Integrate Odoo With ReactJs Front-end ?

Technical

Using Odoo APIs with ReactJS for Odoo headless development allows dynamic content fetching, making it simple to bring in posts from an React.js Odoo backend.

This strategy not only boosts SEO but also ensures that your website loads faster and is search engine optimized.

Furthermore, the APIs allow real-time updates and simplify content maintenance without the need to reinstall the application, giving you complete freedom to improve your shopping experience.

Odoo REST APIs

A structural approach used in networked applications design is called REST API (Representational State Transfer Application Programming Interface).

Different elements of your online business, such as products, orders, and users, can connect with one another thanks to a REST API for a techniques, such as:

GET: Retrieve product or user information.
POST: Place a new order or add a product.
PUT: Update existing product or user profiles.
DELETE: Remove items from a cart or close a user account.

It is easier to integrate with different services, and are widely used for web services due to their simplicity and scalability.

Steps to Integrate Odoo With ReactJs Front-end

To integrate Odoo with a React app, use Tailwind CSS to build the React app, set up environment variables in a.env file, build an Odoo API fetcher method, and start the development server.

Suppose: We are familiar with the Create React App tool, and you have created a React application.

Step 1: Setup Tailwind CSS

To get excellent page UI design, you must use Tailwind CSS and its development dependencies.

Run the following command:

npm install -D tailwindcss postcss autoprefixer

Run the following command to create the tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

Configure Tailwind CSS

Open tailwind.config.js and update the content array with the links to your template files. This allows Tailwind to remove unnecessary styles during production.

/** @type {import('tailwindcss').Config} */

module.exports = {

content: [

"./src/**/*.{js,jsx,ts,tsx}", // Adjust if needed

theme: {

extend: {

colors: {

primary: "#35979C",

plugins: [],

}

In the src directory, open the index.css file and add the following lines to import Tailwind's base, components, and utilities styles:

@tailwind base;

@tailwind components;

@tailwind utilities;

Step 2: Setup Env Variables

First, we'll create the.env file in the project root directory. You can now see the folder structure with Tailwind CSS and the.env file.

create react application named my-odoo-app using following command:

npx create-react-app my-odoo-app

You will get the directory structure like this:

Project Root Directory

Create a .env file in my-odoo-app

Create env file

There are three variables we have to use:

REACT_APP_API_URL="http://localhost:8069"
REACT_APP_API_KEY="c1f251a1907f4128af6fc7c5e40fc5a927ee7f19"
REACT_APP_API_VERSION="v1"

In REACT_APP_API_URL we have to use the domain and port on which the Odoo server is running.

In REACT_APP_API_KEY we have to use the API key for authentication purposes (Odoo API authentication OAuth2).

Step 3: Configure React Query in order to use API.

To install the React Query library (TanStack Query) in your application, use the following command:

npm i @tanstack/react-query

To make things work, use the QueryClientProvider from @tanstack/react-query.

Wrap your application, which is the index.js component, in it and pass queryClient as a prop. It is derived automatically from the initialized QueryClient.

Open the index.js file and edit the Tanstack Query code. The index.js file should look like this:

Configure React Query

Now that we have done this, we can fetch the data:

Step 4: Setup the React Router

React Router allows you to construct several pages in your app. To utilize it, you must first install the React Router library. Simply execute this command in my-odoo-app folder:

npm install react-router-dom

Open the App.js file and replace the code importing BrowserRouter, Route, and Routes to display the page component.

Setup the React Router

After that, you may design the layout to display components for sites like Home, Odoo Product, Odoo Customer Cart, and Login Page. So, create the Layout.js file in the src/pages directory.

Create Directory

Layout file

Step 5: Setup React-Hook-Form and Login Page Component

Managing forms in a React application can be done quickly and easily by integrating the React Hook Form.

npm install react-hook-form

Create the Form Component.

Using react-hook-form, we can develop a form component. In the src/pages folder, create a file called login.js to demonstrate how to use the Odoo API with user forms.

import { useMutation } from "@tanstack/react-query";

import React from "react";

import { useForm } from "react-hook-form";

import { Link } from "react-router-dom";

import { useNavigate } from "react-router-dom";

const LoginPage = () => {

const {

handleSubmit,

formState: { errors },

} = useForm();

const navigate = useNavigate();

const { mutateAsync } = useMutation({

mutationFn: async (data) => {

const response = await fetch(`${process.env.REACT_APP_API_URL}api/${process.env.REACT_APP_API_VERSION}/login`,

{

method: "POST",

headers: {

"Content-Type": "application/json",

Authenticate: process.env.REACT_APP_API_KEY,

body: JSON.stringify(data),

}

);

if (!response.ok) {

throw new Error("Network response was not ok");

}

return response.json(); // Return the parsed JSON response

onSuccess: (data) => {

if (data?.success) {

alert(data?.message);

navigate("/"); // Redirect to the home page

} else {

alert("login Failed", data?.message);

}

onError: (error) => {

alert("Error:", error?.message);

});

const onSubmit = async (data) => {

await mutateAsync(data);

};

const inputClass =

"block bg-slate-50 w-full rounded border border-solid outline-none px-3 py-2 border-border-gray placeholder-slate-400 ring-transparent focus:border-primary focus:ring-primary";

const labelClass =

"block mb-2 text-slate-900 text-base tracking-wide font-semibold";

return (

<form

onSubmit={handleSubmit(onSubmit)}

className="bg-white flex flex-col gap-2"

Email:

</label>

<input

{...register("email", {

required: "Email is required",

pattern: {

value: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,

message: "Email is not valid",

})}

type="email"

id="email"

className={inputClass}

{errors.email && (

<p className="text-red-500">{errors.email.message}</p>

)}

</div>

Password:

</label>

<input

{...register("password", {

required: "password is required",

})}

type="password"

id="password"

className={inputClass}

{errors.email && (

<p className="text-red-500">{errors.password.message}</p>

)}

</div>

<button

type="submit"

className="w-full py-2 bg-primary duration-300 text-white rounded hover:bg-primary/90"

</button>

</form>

Don't have an account

</Link>

Reset password

</Link>

</div>

</span>

<button

type="submit"

className="w-full py-2 px-4 text-start border border-solid bg-white hover:bg-gray-100 duration-300 rounded "

</button>

</div>

</>

);

};

export default LoginPage;

Step 6: Mount the Login Page

Open the App.js file once the React routes and layout are configured. To allow navigating to the login page, include the login component in the routes in this file.

Mount the Login Page