From a Text File to an Online Game: A Complete Guide to Deploying a React App

Do you have the code for a React game ready, but it’s all in a single text file? Do you want to host this game on your WordPress site, in a specific subdirectory, and be able to update it easily? This guide will walk you through the entire process, step by step, from creating the project and configuring it, to publishing and troubleshooting common issues.

Step 1: Creating the Project Structure from a Code File

The first challenge is to transform a loose code file into a fully-fledged, working React project. Simply having a .txt file isn’t enough – we need a complete structure of folders and configuration files to install dependencies and build the application.

We’ll use Vite, a modern build tool, to quickly generate a React project structure.

1. Create the project:npm create vite@latest movie-quiz -- --template react
This command creates a new folder named movie-quiz and fills it with a complete, minimal React project template.
2. Install dependencies:cd movie-quiz npm install
After entering the new folder, npm install reads the package.json file and downloads all the necessary libraries into a node_modules subfolder.

Once these steps are complete, you’ll have a ready-to-use project structure. Now, simply copy the code from your Quiz game Movies - React.txt file and paste it into src/App.jsx, replacing the default content.

Step 2: Configuring Tailwind CSS

If your code, like ours, uses style classes from Tailwind CSS (e.g., bg-gray-50, font-bold), we need to add it to the project. The latest versions of Tailwind integrate with Vite very easily.

Install the plugin:npm install @tailwindcss/vite

Update the Vite configuration: Open the vite.config.js file and add the Tailwind plugin:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
})

Import the styles: Open the src/index.css file, delete its content, and paste in this single line:@import "tailwindcss";

After these steps, the application, when run with npm run dev, should display correctly with all styles applied.

Step 3: Publishing the Game in a WordPress Subdirectory

Once the game is working locally, we can publish it online.

1. Configure the base path: To make the game work in a subdirectory (e.g., /quiz-game/), we need to add the base: '/quiz-game/' option to the vite.config.js file. This is a crucial step that ensures all paths to assets (CSS, JS) in the built application are correct.
2. Build the production version:npm run build
This command creates a dist folder containing optimised, static files of your game, ready for publishing.
3. Upload the files to the server: Using an FTP client, connect to your server, create a quiz-game subdirectory in your main WordPress folder, and upload the contents of the dist folder into it.
4. Configure .htaccess: To ensure that refreshing the page within the game works correctly, create a .htaccess file inside the quiz-game folder on the server. This file should contain rules to redirect all requests to the game’s index.html file, preventing WordPress from taking over the routing and showing a 404 error.

Step 4: Updating the Game

The process for updating the game (e.g., adding new questions) is simple and cyclical:

1. Modify the code: Change the project files on your computer (e.g., add questions in src/App.jsx).
2. Rebuild: Run npm run build to create a new version of the files in the dist folder.
3. Publish: Connect to the server, delete the old contents of the quiz-game folder, and upload the new contents from the dist folder in its place.

Glossary of Commands Used

• npm create vite@latest [name] -- --template react: Creates a new, ready-to-use React project using Vite.
• cd [folder-name]: (Change Directory) Changes the current directory in the terminal.
• npm install: Reads the package.json file and installs all necessary libraries.
• npm install [package-name]: Installs a specific, additional package.
• npm run dev: Starts a local development server with live preview.
• npm run build: Creates an optimised, production version of the application in the dist folder.
• npx [command]: Executes a command from a package installed locally in the project.
• nvm install [version]: Installs a specific version of Node.js using NVM.
• nvm use [version]: Switches the active version of Node.js in the terminal.
• rm -rf [folder-name]: (Remove) Deletes a folder and all of its contents.

Troubleshooting (FAQ)

Here we’ve collected the errors we encountered during the process, along with their solutions.

Error: Could not read package.json

Problem:

Attempting to run an npm command like npm run build in a folder that only contains a code file, not a full project structure.

Solution:

You must first create a full project structure using a command like npm create vite@latest project-name — –template react, and only then move your code into it and run npm commands.

Error: could not determine executable to run

Problem:

The command npx tailwindcss init -p fails. npx is unable to find and run the tailwindcss package.

Solution:

This error can have many causes, from a corrupted npm cache to path issues on your system. The most effective solution is to bypass the problem by using the modern Tailwind integration with Vite (described in Step 2), which doesn’t require running this command manually. However, if you must run it, first try a clean install (rm -rf node_modules package-lock.json, followed by npm install).

Error: Message about the PostCSS plugin for Tailwind

Problem:

After starting the development server, an error appears stating that the PostCSS plugin for Tailwind has been moved to a separate package.

Solution:

This error occurs when trying to use an older configuration method with the latest version of Tailwind CSS (v4+). The correct solution is to use the official @tailwindcss/vite plugin, which automates the entire process. You need to install the plugin, add it to your vite.config.js file, and remove the old configuration from postcss.config.js (if it exists).