Finally I Can Develop WordPress Project in Firebase Studio IDX

Context or Problem

I can install WordPress using wp-cli but have problem, it can’t have pretty URL. I was think about to use nginx, apache, caddy or even moving all in to a docker based dev environment. But seems like all of it didn’t work for me or I just have skill issue.

Experiment

After some funny trial and error on my previous journal , I came to a conclusion to just use Nix configuration file without docker.

Firebase Studio .nix Configuration

So I adjust the .idx/dev.nix configuration file to be like this

# To learn more about how to use Nix to configure your environment
# see: https://firebase.google.com/docs/studio/customize-workspace
{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-24.05"; # or "unstable"
  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.php83
    pkgs.php83Packages.composer

    pkgs.wp-cli
    # pkgs.htop
  ];
  # Services
  services = {

    mysql = {
      enable = true;
    };
  };
  # Sets environment variables in the workspace
  env = {};
  idx = {
    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
    extensions = [

      "bmewburn.vscode-intelephense-client"
      # "WakaTime.vscode-wakatime"
      # "dracula-theme.theme-dracula"
      # "neilbrayfield.php-docblocker"
    ];
    # Enable previews
15 collapsed lines
    previews = {
      enable = true;
      previews = {
        # web = {
        #   # Example: run "npm run dev" with PORT set to IDX's defined port for previews,
        #   # and show it in IDX's web preview panel
        #   command = ["npm" "run" "dev"];
        #   manager = "web";
        #   env = {
        #     # Environment variables to set for your server
        #     PORT = "$PORT";
        #   };
        # };
      };
    };
    # Workspace lifecycle hooks
14 collapsed lines
    workspace = {
      # Runs when a workspace is first created
      onCreate = {
        # Example: install JS dependencies from NPM
        # npm-install = "npm install";
        # Open editors for the following files by default, if they exist:
        default.openFiles = [ ".idx/dev.nix" "README.md" ];
      };
      # Runs when the workspace is (re)started
      onStart = {
        # Example: start a background task to watch and re-build backend code
        # watch-backend = "npm run watch-backend";
      };
    };
  };
}

Installing WordPress with wp-cli in Firebase Studio

1. Get the WordPress core

You can download the latest stable version of WordPress by using this command,

wp core download --path=mywp # you can change mywp to other folder name

I recommend this approach so the workstation root folder from Firebase Studio will be clean and only used for configuration while the WordPress project will be in another path, for example I place it inside /mywp

2. Create database to be used by WordPress

# Login to mysql
mysql -uroot

# Create the database
create database mywp;

3. Add custom router.php file

Place this file inside your WordPress project folder

For example, it should be in /mywp/router.php.

Honestly IDK why this is works, read more about this in Official PHP docs

<?php
// Only run this in built-in CLI server mode:
if (php_sapi_name() === 'cli-server') {
    // Parse the URL’s path (strip any query string)
    $url  = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
    $file = __DIR__ . $url;

    // If it’s an actual file (or directory), serve it straight:
    if (is_file($file) || is_dir($file)) {
        return false;
    }

    // Otherwise, pretend the request was just for index.php
    // so WP’s rewrite engine can kick in
    $_SERVER['SCRIPT_NAME']   = '/index.php';
    $_SERVER['PHP_SELF']      = '/index.php';
    $_SERVER['REQUEST_URI']   = '/index.php' . $url;
    $_SERVER['SCRIPT_FILENAME']= __DIR__ . '/index.php';
}

// Hand off everything else to WordPress:
require __DIR__ . '/index.php';

4. Modify theme file functions.php

Modify file functions.php on your wordpress theme

For example, mine using twentytwentyfive theme so open it around

mywp/wp-content/themes/twentytwentyfive/functions.php

This is required to manually tell that we are enabling mod_rewrite despite in fact we are just using PHP built-in web server.

Then add this snippet on top somewhere after <?php tag should be fine

// Faking mode_rewrite to be true
add_action('init', function() {
    global $wp_rewrite;
    // Pretend mod_rewrite is available
    $wp_rewrite->using_mod_rewrite = true;
    // Regenerate rules in memory
    $wp_rewrite->flush_rules(false);
});

// Prevent infinite redirect loop between /index.php/ and slug
add_filter('redirect_canonical', '__return_false');

5. Ready to serve

Serve out wordpress project with custom router.php file inside your wordpress project folder

# make sure you are inside wordpress project folder

php -S localhost:8080 router.php

6. Ready to install

Intial access will prompt general wordpress installation as usual.

Fill in the required data and make sure to have this database information based on your database name on step #2

DBName = mywp # That one you created on step 2
DBUser = root
DBHost = 127.0.0.1 # you can't use "localhost" IDK why
DBPass = # leave it blank
DBPrefix = wp_ # up to you, defaut wp_

If nothing wrong happened then it should be installed.

All right, sparky! then just fill in the wordpress admin account as usual.

7. Customize the permalink

Now that we successfully installed WordPress on Firebase Studio

You must login to wp-admin first

Permalink settings must be around Settings -> Permalink page

Then adjust the permalink to custom and add something like this

/%postname%/

Make sure to not include the /index.php/ path because we want pretty URL

8. Finish

Now do your research and make sure to:

• Check and verify if all WordPress dashboard feature works fine
• Check your blog url, make sure all assets loaded correctly
• Check blog permalink it should automatically use pretty URL
• Check “sample page” it should also use pretty URL
• Try commenting, reply, etc make sure everything works fine

After following all steps above you should have this kind of folder structure

Voila!

References

• https://studio.firebase.google.com
• https://www.php.net/manual/en/features.commandline.webserver.php