skip to Main Content

WordFlix – Single Page App tutorial: Step 1 – Add “Create React App”

Post Series: WordFlix – Super Powered Single Page App Tutorial

Step 1 – Starting Point

At this point, you should already have your Local by Flywheel instance setup. If not, see the Intro post for the pre-requisites.

We will be starting at Step 0, which can also be seen here on Github.

At this point, we have just a few files setup so that we technicaly have a WordPress theme setup, but it’s not really doing anything.

Create React App

My preferred way of starting a React project is to use Create React App, which is a no/low-configuration React starting point. It sets up a basic React project with some great build scripts and packages out of the box, so that you can focus on building your app, not configuring your build/compile process.

When you get to a point where you need to do something custom that Create React App doesn’t support, it provides helpers to “eject” and you can take over the entirety of the project on your own.

I highly recommend using it for new React projects.

So, in this step, we’ll be adding Create React App to our WordPress theme.

Install Create React App in our theme

In the command line, navigate to the theme directory:

cd ~/{your-local-by-flywheel-site-path}/wp-content/themes/_0

Add a .gitignore file to the root of the theme with just one line: “node_modules”

This will ignore the “node_modules” directory from being tracked by Git.

Install Create React App globally

If you haven’t installed “Create React App” before, run this to install it:

npm install -g create-react-app

Create a new React app in the theme

Then from within the theme’s “assets” directory

create-react-app app
cd app
npm start

This should open up your browser at “localhost:3000” and you should see the boilerplate “Create React App” app running.

A local Node server is serving up the application.

To exit, you can run “control+c” in the command line and it will stop the local server that’s serving the React app.

To compile the files into static files, you can run:

npm run build

Preparing Our Theme

Now that we have a basic React app installed in our WordPress theme, we need to hook it up to WordPress, as the handy Node server that was rendering it on localhost:3000 is just a dev utility and not something that will be running in WordPress.

Basic theme setup

This first step is just setting up super basic theme functionality, which has nothing to do with the Single Page App, just add post-thumbnail suppport so the admin has the “Featured Image” meta box on the post edit screen and it makes the admin easier to see our featured thumbnails from the post table.

Open up the /inc/setup.php file and add the following:

/**
 * Add thumbnail support to the site
 */
add_theme_support( 'post-thumbnails' );

/**
 * Add a thumbnail column to the posts screen
 *
 * @return array
 */
add_filter( 'manage_posts_columns', function( $columns ) {
	$columns['featured_image'] = __( 'Thumbs', 'graphql-workshop' );

	return $columns;
}, 5 );

/**
 * Output the thumbnail in the thumbnail column
 */
add_action( 'manage_posts_custom_column', function( $column_name, $id ) {
	if ( $column_name === 'featured_image' ) {
		echo the_post_thumbnail( 'thumbnail' );
	}
}, 5, 2 );

Enqueue Create React App assets

Next, we’ll add a few functions that will enqueue our static assets from Create React App and load them into our WordPress theme.

/**
 * Gets the contents of the Create React App manifest file
 *
 * @return array|bool|string
 */
function get_app_manifest() {
	$manifest = file_get_contents( get_template_directory_uri() . '/assets/app/build/asset-manifest.json' );
	$manifest = (array) json_decode( $manifest );

	return $manifest;
}

/**
 * Gets the path to the stylesheet compiled by Create React App
 *
 * @return string
 */
function get_app_stylesheet() {
	$manifest = get_app_manifest();

	return get_template_directory_uri() . '/assets/app/build/' . $manifest['main.css'];
}

/**
 * Gets the path to the built javascript file compiled by Create React App
 *
 * @return string
 */
function get_app_script() {
	$manifest = get_app_manifest();

	return get_template_directory_uri() . '/assets/app/build/' . $manifest['main.js'];
}

/**
 * Enqueues the scripts
 */
add_action( 'wp_enqueue_scripts', function() {
	enqueue_react_app();
} );

/**
 * Enqueues the stylesheet and js
 */
function enqueue_react_app() {
	wp_enqueue_script( 'graphql-workshop', get_app_script(), array(), false, true );
	wp_enqueue_style( 'graphql-workshop', get_app_stylesheet(), array(), false, false );
}

When we run “npm run build” on our React app, static files are placed in our theme under the theme’s “/assets/app/build” directory, and each build creates a new hash for the files. Create React App stores the names of the hashed files in a manifest.json file.

So, our first function “get_app_manifest” reads the contents of the manifest file and returns it as an array.

We then use that to create our JS and CSS paths, and then use those paths to enqueue our files.

At this point, we should successfully see the Create React App starter app loaded as our WordPress theme.

Leave a Reply

Share This
Back To Top