{"id":465638,"date":"2024-10-04T12:55:13","date_gmt":"2024-10-04T12:55:13","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=465638"},"modified":"2026-02-25T12:48:23","modified_gmt":"2026-02-25T12:48:23","slug":"integrate-odoo-with-reactjs-frontend","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/","title":{"rendered":"How to integrate Odoo with ReactJS frontend"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Odoo is no longer just a monolithic ERP with server-rendered views.<\/p>\n\n\n\n<p>With its mature API layer and flexible authentication, Odoo can serve as a headless backend for modern frontends like <strong>React, Next.js,<\/strong> and mobile apps.<\/p>\n\n\n\n<p>This guide explains a modern, tested approach to integrating Odoo 18 with a React frontend &#8211; focusing on scalability, performance, and production-ready best practices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Use React with Odoo?<\/h2>\n\n\n\n<p>Using React as a frontend and Odoo as a backend provides:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Faster UI using client-side rendering or SSR<\/li>\n\n\n\n<li>Complete control over UX\/UI without QWeb limitations<\/li>\n\n\n\n<li>Independent deployments of frontend and backend<\/li>\n\n\n\n<li>Better performance for high-traffic apps like <a href=\"https:\/\/webkul.com\/blog\/what-is-headless-ecommerce\/\">headless eCommerce<\/a><\/li>\n<\/ul>\n\n\n\n<p>This architecture is commonly referred to as <a href=\"https:\/\/webkul.com\/odoo-headless-development\/\">Odoo Headless.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">High-Level Architecture<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React \/ Next.js Frontend<\/li>\n\n\n\n<li>Vite Proxy (Dev) \/ Nginx (Prod)<\/li>\n\n\n\n<li>JSON-RPC API Layer<\/li>\n\n\n\n<li>Odoo Backend<\/li>\n<\/ul>\n\n\n\n<p>The frontend never interacts with Odoo views or templates directly. All communication occurs via APIs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">API Options in Odoo<\/h2>\n\n\n\n<p>Odoo does not expose a standard REST API by default.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JSON-RPC (Native and Recommended)<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Default protocol used by Odoo&#8217;s web client<\/li>\n\n\n\n<li>Uses <code>\/jsonrpc<\/code> or <code>\/web\/dataset\/call_kw<\/code><\/li>\n\n\n\n<li>Session-based authentication (cookies)<\/li>\n\n\n\n<li>Provides full access to all Odoo models<\/li>\n\n\n\n<li>No third-party modules required<\/li>\n<\/ul>\n\n\n\n<p>This guide uses the native JSON-RPC approach.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Modern Frontend Stack<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Layer<\/th><th>Technology<\/th><\/tr><\/thead><tbody><tr><td>Framework<\/td><td>React + Vite + TypeScript<\/td><\/tr><tr><td>Styling<\/td><td>Tailwind CSS<\/td><\/tr><tr><td>State Management<\/td><td>React Hooks \/ Context<\/td><\/tr><tr><td>HTTP Client<\/td><td>Axios<\/td><\/tr><tr><td>Authentication<\/td><td>Odoo Session-Based Auth<\/td><\/tr><\/tbody><\/table><figcaption class=\"wp-element-caption\">Tech Stack<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Step-by-Step Implementation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1 \u2013 Create React App (Modern Setup)<\/h3>\n\n\n\n<p>Using <a href=\"https:\/\/vite.dev\/\">Vite<\/a> with TypeScript is recommended for structured Odoo model handling.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm create vite@latest odoo-connect -- --template react-ts\ncd odoo-connect\nnpm install axios\nnpm run dev<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2 \u2013 Tailwind CSS Setup<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Install Dependencies<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Configure <code>tailwind.config.js<\/code><\/strong><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">export default {\n  content: &#091;&quot;.\/index.html&quot;, &quot;.\/src\/**\/*.{js,ts,jsx,tsx}&quot;],\n  theme: {\n    extend: {\n      colors: {\n        primary: &quot;#714B67&quot;,\n      },\n    },\n  },\n  plugins: &#091;],\n};<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Step 3: Set up Env Variables<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Create <code>.env<\/code> File<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">VITE_ODOO_BASE_URL=http:\/\/localhost:8069\nVITE_ODOO_DB=your_database_name<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Configure Proxy in <code>vite.config.ts<\/code><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">import { defineConfig, loadEnv } from &quot;vite&quot;;\nimport react from &quot;@vitejs\/plugin-react&quot;;\n\nexport default defineConfig(({ mode }) =&gt; {\n  const env = loadEnv(mode, process.cwd(), &quot;&quot;);\n  return {\n    plugins: &#091;react()],\n    server: {\n      proxy: {\n        &quot;\/web&quot;: {\n          target: env.VITE_ODOO_BASE_URL,\n          changeOrigin: true,\n          secure: false,\n        },\n      },\n    },\n  };\n});<\/pre>\n\n\n\n<p>This proxy routes API calls through Vite&#8217;s dev server, preventing CORS issues during development.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4 \u2013 Create JSON-RPC API Layer<\/h3>\n\n\n\n<p>Create <code>src\/api\/client.ts<\/code> to centralize communication with Odoo.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">import axios from &quot;axios&quot;;\nexport const api = axios.create({\n  baseURL: &quot;\/&quot;,\n  headers: { &quot;Content-Type&quot;: &quot;application\/json&quot; },\n  withCredentials: true,\n});\nexport const odooCall = async &lt;T&gt;(\n  model: string,\n  method: string,\n  args: any[] = [],\n  kwargs: any = {}\n) =&gt; {\n  const response = await api.post(&quot;\/web\/dataset\/call_kw&quot;, {\n    jsonrpc: &quot;2.0&quot;,\n    method: &quot;call&quot;,\n    params: { model, method, args, kwargs },\n    id: Math.floor(Math.random() * 1000000000),\n  });\n  if (response.data.error) {\n    throw response.data.error;\n  }\n  return response.data.result as T;\n};<\/pre>\n\n\n\n<p>This reusable helper keeps your API layer clean, maintainable, and scalable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5 \u2013 Authentication (Session-Based)<\/h3>\n\n\n\n<p>Odoo uses session-based authentication. Once logged in, the browser automatically manages cookies.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Login Example<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">const handleLogin = async (username: string, password: string) =&gt; {\n  try {\n    const response = await api.post(&quot;\/web\/session\/authenticate&quot;, {\n      jsonrpc: &quot;2.0&quot;,\n      params: {\n        db: import.meta.env.VITE_ODOO_DB,\n        login: username,\n        password: password,\n      },\n    });\n\n    const result = response.data.result;\n\n    if (result &amp;&amp; result.uid) {\n      console.log(&quot;Logged in as&quot;, result.username);\n      localStorage.setItem(&quot;odoo_session&quot;, JSON.stringify(result));\n    }\n  } catch (error) {\n    console.error(&quot;Login Failed&quot;, error);\n  }\n};<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6 \u2013 Fetching Data &amp; Images<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Fetch Products<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">const fetchProducts = async () =&gt; {\n  const products = await odooCall(&quot;product.product&quot;, &quot;search_read&quot;, &#091;], {\n    fields: &#091;&quot;name&quot;, &quot;list_price&quot;],\n    limit: 20,\n  });\n\n  return products;\n};<\/pre>\n\n\n\n<p>Always request only the required fields and apply limits to improve performance.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Display Product Images<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">const getImageUrl = (id: number) =&gt;\n  `\/web\/image?model=product.product&amp;id=${id}&amp;field=image_128`;\n\n&lt;img src=&quot;{getImageUrl(product.id)}&quot; alt=&quot;{product.name}&quot;&gt;;<\/pre>\n\n\n\n<p>Use resized image fields like <code>image_128<\/code> or <code>image_256<\/code> to optimize loading speed.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7 \u2013 Session Persistence<\/h3>\n\n\n\n<p>React state resets on refresh. Persist the session using <code>localStorage<\/code>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">const &#091;session, setSession] = useState(() =&gt; {\n  const saved = localStorage.getItem(&quot;odoo_session&quot;);\n  return saved ? JSON.parse(saved) : null;\n});<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Logout<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\">localStorage.removeItem(&quot;odoo_session&quot;);<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Screenshots (Demo App)<\/h2>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1120\" height=\"880\" data-id=\"528286\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp\" alt=\"Logic Page\" class=\"wp-image-528286\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1120\" height=\"880\" data-id=\"528283\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-006.webp\" alt=\"fetch-contacts\" class=\"wp-image-528283\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-006.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-006-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-006-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-006-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1120\" height=\"880\" data-id=\"528282\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-005.webp\" alt=\"fetch-products\" class=\"wp-image-528282\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-005.webp 1120w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-005-300x236.webp 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-005-250x196.webp 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-005-768x603.webp 768w\" sizes=\"(max-width: 1120px) 100vw, 1120px\" loading=\"lazy\" \/><\/figure>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Production Best Practices<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Security<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Always use HTTPS in production<\/li>\n\n\n\n<li>Do not expose Odoo port 8069 publicly<\/li>\n\n\n\n<li>Use Nginx or Apache as a reverse proxy<\/li>\n\n\n\n<li>Configure CORS properly when using different domains<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Performance<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Request resized images (<code>image_128<\/code>, <code>image_256<\/code>)<\/li>\n\n\n\n<li>Use <code>limit<\/code> and <code>offset<\/code> in <code>search_read<\/code><\/li>\n\n\n\n<li>Always specify required fields<\/li>\n\n\n\n<li>Avoid fetching unnecessary relational fields<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Integrating Odoo 18 with React using native JSON-RPC enables a scalable, secure, and upgrade-safe headless architecture.<\/p>\n\n\n\n<p>By separating the frontend and backend, you gain full control over UX while leveraging Odoo&#8217;s powerful business logic and data management.<\/p>\n\n\n\n<p>With a proper Vite proxy, session-based auth, a structured API layer, and Nginx in production &#8211; you can deploy high-performance apps without any third-party REST modules.<\/p>\n\n\n\n<p>This approach is stable, future-proof, and fully suitable for enterprise-level implementations.<\/p>\n\n\n\n<p>If you are planning to implement advanced headless solutions, explore the Webkul <a href=\"https:\/\/store.webkul.com\/Odoo-REST-API.html\" target=\"_blank\" rel=\"noreferrer noopener\">Odoo REST APIs<\/a> for <a href=\"https:\/\/webkul.com\/headless-commerce-development-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">headless development services<\/a>.<\/p>\n\n\n\n<p>You can also check out our open-source <a href=\"https:\/\/github.com\/webkul\/odoo-react-nextjs-commerce\" target=\"_blank\" rel=\"noreferrer noopener\">Odoo React headless eCommerce app<\/a> to accelerate your development process.<\/p>\n\n\n\n<p>Webkul, an official Odoo partner and <a href=\"https:\/\/webkul.com\/odoo-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">Odoo development company<\/a>, offers custom module development, SaaS solutions, mobile apps, system integrations, and data migrations.<\/p>\n\n\n\n<p>Thank you for reading! We hope this guide helps you confidently build modern headless applications powered by Odoo.<\/p>\n\n\n\n<p>And that&#8217;s a wrap &#8211; you now have everything you need to integrate Odoo 18 with a modern React frontend.<br><strong><em>Happy Coding!<\/em><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Odoo is no longer just a monolithic ERP with server-rendered views. With its mature API layer and flexible authentication, Odoo can serve as a headless backend for modern frontends like React, Next.js, and mobile apps. This guide explains a modern, tested approach to integrating Odoo 18 with a React frontend &#8211; focusing on scalability, <a href=\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":545,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2030,2007,6357],"tags":[9219,14744,1267,9272,15656,6360],"class_list":["post-465638","post","type-post","status-publish","format-standard","hentry","category-e-commerce","category-odoo","category-react-js","tag-headless","tag-next-headless-theme","tag-odoo","tag-odoo-website","tag-odoo-headless","tag-react-ecommerce"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to integrate Odoo with ReactJS frontend - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Learn how to integrate Odoo with Magento 2 frontend in NextJs Headless eCommerce. Using APIs in Next.js for allowed dynamic content fetching.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to integrate Odoo with ReactJS frontend - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Learn how to integrate Odoo with Magento 2 frontend in NextJs Headless eCommerce. Using APIs in Next.js for allowed dynamic content fetching.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-04T12:55:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-25T12:48:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp\" \/>\n<meta name=\"author\" content=\"Abhishek Kumar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Kumar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/\"},\"author\":{\"name\":\"Abhishek Kumar\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9\"},\"headline\":\"How to integrate Odoo with ReactJS frontend\",\"datePublished\":\"2024-10-04T12:55:13+00:00\",\"dateModified\":\"2026-02-25T12:48:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/\"},\"wordCount\":580,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp\",\"keywords\":[\"Headless\",\"next headless theme\",\"odoo\",\"Odoo website\",\"odoo-headless\",\"react ecommerce\"],\"articleSection\":[\"E commerce\",\"Odoo\",\"react js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/\",\"url\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/\",\"name\":\"How to integrate Odoo with ReactJS frontend - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp\",\"datePublished\":\"2024-10-04T12:55:13+00:00\",\"dateModified\":\"2026-02-25T12:48:23+00:00\",\"description\":\"Learn how to integrate Odoo with Magento 2 frontend in NextJs Headless eCommerce. Using APIs in Next.js for allowed dynamic content fetching.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp\",\"width\":1120,\"height\":880,\"caption\":\"Logic Page\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to integrate Odoo with ReactJS frontend\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9\",\"name\":\"Abhishek Kumar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Abhishek Kumar\"},\"description\":\"Abhishek Kumar, a skilled software engineer, specializes in crafting immersive digital experiences. With a focus on frontend development, he excels in creating headless themes . Proficient in JavaScript and next.js, Abhishek's expertise adds a unique and dynamic dimension to any project, ensuring a seamless and engaging user journey.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/abhishekkumar-mg121\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to integrate Odoo with ReactJS frontend - Webkul Blog","description":"Learn how to integrate Odoo with Magento 2 frontend in NextJs Headless eCommerce. Using APIs in Next.js for allowed dynamic content fetching.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/","og_locale":"en_US","og_type":"article","og_title":"How to integrate Odoo with ReactJS frontend - Webkul Blog","og_description":"Learn how to integrate Odoo with Magento 2 frontend in NextJs Headless eCommerce. Using APIs in Next.js for allowed dynamic content fetching.","og_url":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2024-10-04T12:55:13+00:00","article_modified_time":"2026-02-25T12:48:23+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp","type":"","width":"","height":""}],"author":"Abhishek Kumar","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Abhishek Kumar","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/"},"author":{"name":"Abhishek Kumar","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9"},"headline":"How to integrate Odoo with ReactJS frontend","datePublished":"2024-10-04T12:55:13+00:00","dateModified":"2026-02-25T12:48:23+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/"},"wordCount":580,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp","keywords":["Headless","next headless theme","odoo","Odoo website","odoo-headless","react ecommerce"],"articleSection":["E commerce","Odoo","react js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/","url":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/","name":"How to integrate Odoo with ReactJS frontend - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp","datePublished":"2024-10-04T12:55:13+00:00","dateModified":"2026-02-25T12:48:23+00:00","description":"Learn how to integrate Odoo with Magento 2 frontend in NextJs Headless eCommerce. Using APIs in Next.js for allowed dynamic content fetching.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2024\/10\/selection-004-1.webp","width":1120,"height":880,"caption":"Logic Page"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/integrate-odoo-with-reactjs-frontend\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to integrate Odoo with ReactJS frontend"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9df44e99abf7df96a2c30b30fe20a4b9","name":"Abhishek Kumar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dab3b6807a6aa05fa5ad733392108c9f4ca765e4051f2e20687e10133f461e5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Abhishek Kumar"},"description":"Abhishek Kumar, a skilled software engineer, specializes in crafting immersive digital experiences. With a focus on frontend development, he excels in creating headless themes . Proficient in JavaScript and next.js, Abhishek's expertise adds a unique and dynamic dimension to any project, ensuring a seamless and engaging user journey.","url":"https:\/\/webkul.com\/blog\/author\/abhishekkumar-mg121\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/465638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/545"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=465638"}],"version-history":[{"count":116,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/465638\/revisions"}],"predecessor-version":[{"id":528287,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/465638\/revisions\/528287"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=465638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=465638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=465638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}