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

How to deploy a react + vite app to a private hosting with cpanel?

Im currently learning web dev so I wrote a tasklist app using React + Vite in VSCode.
You can see it here: https://github.com/AdSaMo/react-tasklist

In Vite’s documentation you can find several ways to deploy an app (Git-hub pages, Netlify, etc…) but that’s not what I was looking for.

The problem comes when I want to deploy it in a private shared hosting. I’ve got a domain and a hosting in Sered and I would like to deploy it there. I have seen some posts talking about pasting everything inside build folder in to the public_html folder via cpanel.

However, as I’am using Vite when I run "npm run buld" I don’t get a "build" folder but a "dist" one.

I am not sure but I guess structure is different, so when I include what’s inside of dist folder into public_html and I type the URL in my browser nothing shows up. Just a white screen with some errors in console:

What shows up

When that’s what it should be like:
https://adsamo.github.io/react-tasklist/

Anyone knows how could I have this app with dist folder instead of build folder in my domain and hosting via cpanel?

Thanks all!

PD: Im pretty new, so pls have mercy xD

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to fix it. I just had to upload it normally via cPanel. The problem was that href was wrong (wrong path) in index.html


  2. 0

    I have the same issue. Can you please be more specific? Which wrong path in your index file? Below is my index file. Can you spot the line for me?

        <!DOCTYPE html>
     <html lang="en">
      <head>
       <meta charset="UTF-8" />
       <link rel="icon" type="image/svg+xml" href="/assets/favicon-41f862de.ico" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link
  rel="stylesheet"
  type="text/css"
  charset="UTF-8"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
/>
       <link
  rel="stylesheet"
  type="text/css"
  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
/>
       <title>Microblack - Welcome</title>
       <script type="module" crossorigin src="/assets/index-b00be4be.js"> 
       </script>
       <link rel="stylesheet" href="/assets/index-743c7266.css">
      </head>
      <body>
       <div id="root"></div>

      </body>
     </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search