Download the PHP package masonitedoors/react-app-loader without Composer

On this page you can find all versions of the php package masonitedoors/react-app-loader. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of masonitedoors/react-app-loader

Informations about the package react-app-loader

React App Loader

React App Loader on Packagist Build Status

An mu-plugin that provides an API for loading React applications built with create-react-app into the front-end of WordPress.

Requirements

Setup

Loader

Add the plugin to your site's mu-plugins directory.

This plugin is also available to install via composer.

React App

While this loader does not require any specific structure to your React application, it does require the React app to be loaded as a WordPress plugin. In order to do this, we will need to add a single PHP file so WordPress can recognize it as a WordPress plugin. Although the PHP file can be named anything, the filename should match the nomenclature of the React app directory name in order to follow WordPress plugin development best practices.

This PHP file (e.g. react-app-name.php) should include header comment what tells WordPress that a file is a plugin and provides information about the plugin.

Example:

PHP Interface

ReactAppLoader\API::register()

The register method has 4 required parameters and should be called within the plugins_loaded action.

Parameter Type Description
\$slug string The page slug where the React app will live on the site. The loader will also reserve this slug with WordPress, preventing any new posts from being made at the same URL. If any existing posts share the defined slug, they will not be able to be accessed on the front-end of the site once rewrite rules are flushed.
\$root_id string The id of the root element that the React app should mount to. By default, Create React App has this as 'root'.
\$cra_directory string The absolute path to the plugin directory that contains the react app. In most situations, this should be plugin_dir_path( __FILE__ ). This can also be a URL to the base directory of a React app on a different website.
\$role string The WordPress user role required to view the page. If a user tries to access the page without this role, they will be redirected to the site's home_url(). If no authentication is needed, this should be set as 'nopriv'.
\$callback callable Optional callback function. This is only fired on the registered page before the React app assets are enqueued.
\$wp_permalinks array Optional array of subdirectories off of the defined slug that we DO WANT WordPress to handle.

Usage

With the loader installed as an mu-plugin, we can utilize the ReactAppLoader\API::register() method to register our React app WordPress plugin with the loader.

URL Structure

When a React plugin is registered with this loader plugin, a virtual page is created within WordPress. As a result, this new page will not show up within the regular pages/posts list in wp-admin. Because of the nature of creating a virtual page by adding new rewrite rules to WordPress, the rewrite rules will need to be flushed before the new page will be accessible.

Flushing WordPress Rewrite Rules

You'll need to refresh your site's rewrite rules in the database before you will see any React apps registered with the loader. This can be done by visiting your site's permalinks settings page in the admin area.

Visiting the Permalinks screen triggers a flush of rewrite rules

Settings → Permalinks

Rewrite rules can also be flushed via WP-CLI.

Trailing Slash

Trailing slash has been removed for registerd React app pages. This was done in an effort to create consistency in behavior with create-react-app's node-server structure (the environment that fires up when you run npm start).

Remote React App Support

Support for loading React apps hosted on other websites is available as of version 1.4.0.

This can be achived by using a URL to the root of the React app For the 3rd argument in the register method. If your React app's asset-manifest.json is https://example.org/my-react-app/asset-manifest.json, use the first part of the URL (omit asset-manifest.json).

Recommendations

Using Images Within Your React App

It is up the React app to ensure that any images used are using absolute paths. It is recommended to use a digital asset management service such as Widen. Any images using relative paths within the React app will be broken when the app is loaded within WordPress.

Avoiding Conflicting Styles

When the React app is loaded from within WordPress, there is potential for styling conflicts introduced from theme/plugin CSS. It is recommended that you scope your React app's base styles within the React app at a root component using CSS Modules.

App.js:

App.module.scss:

Once implemented, our base styles will now be scoped under the root hashed component:

Edit this example on codesandbox

Common Issues

I am getting a 404 when hitting the page slug I registered.

Verify that your React app WordPress plugin has been activated. Your site's rewrite rules might not have been flushed or flushed properly. See Flushing WordPress Rewrite Rules for instructions.

I am able to hit the page slug I registered, but my React app is not loading.

This could be happening from a few things:

  1. If your React app is using react router, you may need to specify a basename. This should be the exact same value as the slug registerd with the loader. See Browser Router.

  2. The loader relies on the newer asset-manifest.json structure that was introduced in create-react-app v3.2.0. If your React app was built using an eariler version of create-react-app, you will need to update your React app.

  3. The asset-manfiest.json could not be found at all within your React app. Most likely your React app was never built or the build failed.

I am being redirected to my site's homepage when trying to access the page slug I registered.

This happens when your current WordPress user does not have the same role that was defined when registering with the loader.

Credit

This plugin is based off the great work done by humanmade/react-wp-scripts.

All versions of react-app-loader with dependencies

PHP Build Version
Package Version
Requires php Version >=7.0
composer/installers Version ^1.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package masonitedoors/react-app-loader contains the following files

Loading the files please wait ....