Deploying on cPanel (React, Next, Nuxt and .htaccess)

In this expanded blog article, you will learn how the static rendering cycle works, why cPanel breaks internal routes by default, and how to master the hidden .htaccess file to fix routing forever. We will also cover special cases and configurations needed for advanced frameworks like Next.js and Nuxt.

1. cPanel and Apache Servers: Originally designed for the classic web era (PHP, static HTML). When a user enters yoursite.com/contact, Apache physically looks for a folder named /contact or a file named contact.html on the server. If it doesn't exist, it throws a 404 Error immediately.

2. Single Page Applications (SPAs): Frameworks like React, Vue or tools like Vite operate under the concept of a single real physical file: index.html. Routing (going to /contact or /dashboard) is handled by JavaScript in the client's browser (Client-Side Routing), not the server.

3. The .htaccess file: It is a directory-level configuration file supported by Apache web servers. It allows you to alter software directives, protect folders, change system parameters and, crucially in our case, create URL rewrite rules using the mod_rewrite module.

To deploy on traditional hosting without native Node.js for active backend in production, we must convert our modern development code into optimized static resources that the browser can interpret (plain HTML, CSS, and JS).

Step 1: Compile locally
Run the corresponding production command in your development terminal:

This will create an optimized and minified directory, commonly called dist (in Vite/Vue) or build (in Create React App).

Step 2: Compression and Upload
Compress the files located inside that resulting folder into a .zip file. Access your cPanel, go to the File Manager, navigate to your domain's public root directory (usually the public_html folder), upload the compressed file, and extract it there.

Step 3: Free HTTPS Security
Before testing, don't forget to protect your website. Go to the SSL/TLS Status section within your main cPanel dashboard, select your domains, and click the Run AutoSSL button. In a few minutes, you will have a trusted SSL certificate installed completely free of charge.

Now is when the classic error occurs: you enter the home page (/), everything loads beautifully, but if you click a link in your navbar that takes you to /services and press F5 to refresh the page, the screen goes white with an Apache server 404 error.

The Solution: We must force Apache to stop looking for physical folders and transparently redirect absolutely all route requests to the single index.html file, allowing the React or Vue router to take control on the client.

Create a file named exactly .htaccess inside your public_html directory (if you don't see it after creating it, make sure to check the "Show hidden files / dotfiles" box in cPanel's File Manager settings) and insert the following code:

What exactly does this code do? It activates the URL rewriting engine (RewriteEngine On), checks if the requested physical file does not exist (!-f), if the directory does not exist (!-d), and if it is not a symbolic link (!-l). If these conditions are met, it injects the content of index.html without changing the browser URL.

When working with environments that by default are born for server-side rendering (SSR), we need to explicitly configure them to export static pages before uploading them to cPanel.

Strategy in Nuxt (Vue)
Instead of running the conventional build command, use the native static generation command:

This command will dynamically scan your components and routes to convert them into independent HTML files saved inside the dist folder, ready for cPanel.

Strategy in Next.js (React)
If your Next.js project connects to external APIs and does not require Node server processing for routes, open your configuration file next.config.ts or next.config.js and add the static export directives:

Once the properties are added, run in your local console:

This will create a directory called out. This folder contains the pure static build that you must compress and upload to the public_html folder of your cPanel hosting.

By applying the .htaccess trick and static builds, you have unified two technologies from different eras. Now you can open the browser, navigate through the internal menus of your SPA, refresh the page, and you will notice that the website loads instantly with its HTTPS security padlock active and without ever throwing a page not found error.