Skip to content

Anshuk Attri

Pretend Writer

Menu
  • Home
  • About Me
  • Published Works
  • Quarter Life Crisis
  • Programming Projects
  • Contact
Menu

Setup NextJS app, with a WordPress installation in its sub-folder, on Apache running on Linux

Posted on October 25, 2020December 24, 2021 by Anshuk Attri

This is a simple guide to deploy NextJS app, with a WordPress installation in its sub-folder, on Apache running on Linux.

I recently had to do it myself, and couldn’t find any direct guides to implement this. NextJS takes care of its own routing, and if you put the WordPress installation into a sub-folder, you’ll end up getting a 404 page. Even putting the WordPress folder into public/ folder doesn’t work.

Aim

To run a NextJS site at example.com with a WordPress blog at example.com/blog

Guide

To get it to work, first, we will deploy NextJS app.

Let’s say you’ve copied your NextJS app files to:

/var/www/html/example.com/

To build the NextJS app, run:

npm run build

After the app is built, run it via:

npm start

Note down the port on which your Node server is started, which probably will start at localhost:3000.

Since starting this takes control of your terminal window and the server only runs as long as you keep your terminal window open, we will start it as:

nohup npm start &

This will start your server, but give you back control of the terminal window after you press a key. To see what process is started and to see its ID in case you want to terminate the Node server, run:

ps aux | grep node

Now, let’s say you want to setup WordPress in a subfolder named blog, so that it can be accessed via example.com/blog/.

Get the WordPress installation files from their website, and extract it to the directory:

/var/www/html/example.com/blog

Now we will setup a virtual host in Apache. In Ubuntu, go to  /etc/apache/sites-available/, and setup a file named example.com.conf with the following info:

 

ServerAdmin admin@example.com
ServerName example.com
ServerAlias www.example.com
DocumentRoot /var/www/html/example.com/

ProxyRequests off

<Proxy *>
Order deny,allow
Allow from all
</Proxy>

<Location />
ProxyPass http://localhost:3000/
ProxyPassReverse http://localhost:3000/
</Location>

<Location /blog/>
ProxyPass !
ProxyPassReverse !
</Location>

ErrorLog ${APACHE_LOG_DIR}/example.com.log
CustomLog ${APACHE_LOG_DIR}/access_example.com.log combined

 

Enable your site, and restart your Apache web server:

sudo a2ensite example.com.conf

sudo service apache2 restart

And voila! Your NextJS site will be available at example.com and your WordPress blog will be available at example.com/blog

PC: Image by Markus Spiske from Pixabay

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Sample chapters of a possible future novella
  • महक
  • A Bottle of Water – A Short Story
  • Serenity
  • A small list of privacy tools

Categories

  • Articles (5)
  • Book Reviews (2)
  • Fiction (1)
  • Incohernet Ramblings (3)
  • My Books (2)
  • Poems (14)
  • Short Stories (5)
  • Technology (1)

Social Media Links

        
©2023 Anshuk Attri | Design: Newspaperly WordPress Theme