cPanel Question posted in
The official documentation can be seen here.

How to deploy create-react-app to subdirectory on a server – CPanel

I have a create-react-app that runs perfectly on my local host, however, when I try to deploy into cPanel (I want to deploy into subdirectory as the main domain already have other contents), Only the front page works fine and all other links are broken.

Example code below:

  <BrowserRouter >
    <TopBar/>
    <Switch>
      <Route exact path="/start" component={start}/>
      <Route path="/start/page1" component={page1}/>
      <Route path="/start/page2" component={page2}/>
    </Switch>
  </BrowserRouter>

I have set "homepage" as "http://mydomain/start/" in package.json as mentioned in https://create-react-app.dev/docs/deployment.

Everything works fine on my local host until I run "npm run build" and upload to cPanel subdirectory. Which works fine in "http://mydomain/start/" but in "http://mydomain/start/page1" and "http://mydomain/start/page2" it shows 404 Error.

Is there any configuration I have missed? Thanks in advance.

Tags:

2

Answers


  1. 0

    So what I would suggest is that you go into Cpanel and created a subdomain, if you haven’t already. You do it here.
    Subdomain image

    Then you chose your domain and add the subdomain, as seen here:

    Subdomain creation

    After that, all you need to do is go to the File Manager, see your subdomain there and add your files there along with the .htaccess file.

    Now, the .htaccess can vary a lot depending on what you are trying to do, but saying you want to start with "page1", and I am guessing that, that page1 is an html file after you npm build, you can do as following

    RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
<IfModule mod_expires.c>
  ExpiresActive On

 # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/webm "access plus 1 year"
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # Fonts
  ExpiresByType font/ttf "access plus 1 year"
  ExpiresByType font/otf "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType application/font-woff "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>
DirectoryIndex index.html //Delete these 3 lines (this will be the file generated by react)
// you could also do 
DirectoryIndex index.html/page1

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.*)$ $1.html [NC,L]

    *The DirectoryIndex is the main file *

    Let me know if it helped

    Login or Signup to reply.
  2. 0

    Have you done point 6 in here? Essentially I think the 404 is happening because requests to /start/page1 are not actually reaching your react app at all, they are trying to reach that location on the server which doesn’t contain anything.

    There will be some kind of config that allows requests to all paths starting with /start to be routed to the react app, at which point the react routing will kick in. I believe that link might help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search