Easily embed React apps into WordPress with ReactPress plugin
Tags: react, wordpress, webdev
Published: 2021-02-22 21:39:05

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k596qhhhbbgroxr4r61a.png)

<!-- wp:heading -->
<h2>Why React and WordPress</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://www.wordpress.org" target="_blank" aria-label="WordPress (opens in a new tab)" rel="noreferrer noopener" class="rank-math-link">WordPress</a> and <a href="https://reactjs.org" target="_blank" aria-label="React (opens in a new tab)" rel="noreferrer noopener" class="rank-math-link">React</a> are a killer combination to develop web apps.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With WordPress you get:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>easy content management for help pages, your landing page, your blog, and your other marketing activities</li><li>secure and proven user management</li><li>over 100.000 plugins</li><li>a lot of flexibility over time to change the character of your site</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>React brings you the largest ecosystem to build great rich JavaScript apps that allow a simple data model, good performance and are easy to test.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For example, if we want to write a new revolutionary email app, we can write the interface of the email client with React, but for everything else use WordPress. So while you're developing your app, you might want to:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>choose and install a theme</li><li>create a landing page for your app</li><li>add a form to collect email addresses</li><li>create a blog and publish your posts on Twitter to promote your app</li><li>optimize your site for search engines</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Later it might be useful to</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>offer a paid membership</li><li>create a forum or FAQ</li><li>create separate landing pages</li><li>all this can easily be done with WordPress, without writing a single line of code.</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Embedding a React app into WordPress with ReactPress</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"left","id":1359,"width":256,"height":256,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="alignleft size-large is-resized"><img src="https://rockiger.com/wp-content/uploads/icon-256x256-1.png" alt="" class="wp-image-1359" width="256" height="256"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>While there are other ways to integrate React with WordPress, the <a aria-label="ReactPress (opens in a new tab)" href="https://wordpress.org/plugins/reactpress/" target="_blank" rel="noreferrer noopener" class="rank-math-link">ReactPress</a> plugin is the easiest to embed a React app into a WordPress page and lets you use <a aria-label="create-react-app (opens in a new tab)" href="https://reactjs.org/docs/create-a-new-react-app.html" target="_blank" rel="noreferrer noopener" class="rank-math-link">create-react-app</a> without any custom build configurations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Not only does ReactPress automate the React integration for you, but it also ensures a seamless development experience, through running your local React dev server with the theme of your WordPress site.</p>
<!-- /wp:paragraph -->

<!-- wp:group {"backgroundColor":"light-background"} -->
<div class="wp-block-group has-light-background-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":20}}} -->
<h3 style="font-size:20px">Why not just using headless WordPress with SSR</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I know that headless WordPress with <a aria-label="Next.js (opens in a new tab)" href="https://nextjs.org" target="_blank" rel="noreferrer noopener" class="rank-math-link">Next.js</a>, <a aria-label="Gatsby (opens in a new tab)" href="https://www.gatsbyjs.com" target="_blank" rel="noreferrer noopener" class="rank-math-link">Gatsby</a>, or <a aria-label="Frontity (opens in a new tab)" href="https://frontity.org" target="_blank" rel="noreferrer noopener" class="rank-math-link">Frontity</a> is all the rage right now, but with these solutions, you add a layer of complexity to your app, and more importantly, you lose a lot of the benefits of the WordPress ecosystem (themes and plugins).</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The steps from development to deployment are:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true,"start":0} -->
<ol start="0"><li>Setup your local dev environment.</li><li>Install ReactPress on your local WordPress installation</li><li>Create a new React app from your WP installation</li><li>Develop your React app</li><li>Build the app</li><li>Install ReactPress on live WordPress site</li><li>Create the same React app there</li><li>Upload the build of your React app to your live site to deploy it.</li></ol>
<!-- /wp:list -->

<!-- wp:embed {"url":"https://youtu.be/pVi07A_OZYA","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/pVi07A_OZYA
</div><figcaption>The video shows the process with the TwentyTwenty-theme.</figcaption></figure>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>Repeat steps 3, 4 and 7 until your app is finished.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Setup your local dev environment.</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To develop React apps your WordPress installations needs access to: </p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>the PHP function <code>shell_exec</code> and <code>exec</code>,</li><li>the <code>nodejs</code> package manager <code>npm</code> version 6 or higher</li><li>and a POSIX compatible system</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>This means <a aria-label="Local by Flywheel (opens in a new tab)" href="https://localwp.com" target="_blank" rel="noreferrer noopener" class="rank-math-link">Local by Flywheel</a> won't work, because you don't have control over the node environment there. The easiest way to create a local WordPress installation that fits the requirements is using the <a aria-label="Bitnami-Installers (opens in a new tab)" href="https://bitnami.com/stack/wordpress/installer" target="_blank" rel="noreferrer noopener" class="rank-math-link">Bitnami-Installers</a>. They provide a self-contained installation that doesn't pollute your system. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>However you install your WordPress dev system, if it meets the requirements you should be fine.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Install ReactPress on your local WordPress installation</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In your local WordPress go to plugin installation, search for <strong>ReactPress</strong>, install and activate the plugin.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Create a new React app from your local WP installation</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In the admin of your WP installation, click on <strong>ReactPress</strong> in the sidebar. There you should see a form to create a new React app.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Enter a <strong>name</strong> (later you need to use the same name in the live system), enter a <strong>pageslug</strong>, choose the type "<strong>Develop a new app (Usually on a local machine).</strong>" and choose the <strong>create-react-app-template</strong> you would like to use and finally click the "<strong>Create React App</strong>" button.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After a short while your app should be created and running at port: <strong>3000</strong>. If you click on the link you can see your local dev app running in the theme of your WP installation.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://ps.w.org/reactpress/assets/screenshot-2.png?rev=2471443" alt=""/><figcaption>ReactPress with running React app <strong>reactino</strong>.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Develop your React app</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now you can develop your React app as you are used to. Use <a href="https://developer.wordpress.org/rest-api/" target="_blank" aria-label="WordPress's built-in REST-API (opens in a new tab)" rel="noreferrer noopener" class="rank-math-link">WordPress's built-in REST-API</a> to get data or use the <a href="https://www.wpgraphql.com" target="_blank" aria-label="WPGraphQL plugin (opens in a new tab)" rel="noreferrer noopener" class="rank-math-link">WPGraphQL plugin</a> if you prefer <a href="https://graphql.org" target="_blank" aria-label="GraphQL (opens in a new tab)" rel="noreferrer noopener" class="rank-math-link">GraphQL</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Build the app</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you want to deploy to your live site, build your app through the WP admin. Don't use the CRA command line for this!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Install ReactPress on live WordPress site</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before you upload your React app, install ReactPress on your live site the same way you did on your local installation.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Create the same React app there</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Create the same React app on your live system, that you created on your local system. <em>Important!</em> Use the <em>exact same name</em> and this time choose "<strong>Deploy an already build app (Usually on a server).</strong>" as the type.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Upload the build of your React app to your live site to deploy it.</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Finally, upload the build of your React app. Upload the build folder of your local React app to the app on your live system. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The ReactPress admin shows where your apps are located. It will be something like this: <code>.../htdocs/wp-content/plugins/reactpress/apps/[your-appname]</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you click on the URL slug of your React app in ReactPress you should see your React app on your live system.</p>
<!-- /wp:paragraph -->

<!-- wp:image -->
<figure class="wp-block-image"><img src="https://ps.w.org/reactpress/assets/screenshot-6.png?rev=2471443" alt=""/><figcaption>Deployed React app embedded into live WordPress site with TwentyTwenty-theme.</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Where to go from here?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You should be able to create React app embedded in WordPress now. If you have the next big app idea you are ready to start. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you have any questions, let me know in the comments.</p>
<!-- /wp:paragraph -->