A site built with React or Vue (with Vite or with the older tools) does not run on the server: you build it on your computer into a folder of static files, and that folder is what you publish. It works on any hosting plan, with no Node at all. The two classic problems are the right folder in the wrong place, and the page that gives a 404 when you refresh (F5) on any route but the first. Both are fixed in a few minutes.
Build and publish
| 1 |
Build: npm run buildThe result goes into a folder that depends on the tool: dist in Vite and Vue CLI, build in the old Create React App.
|
|
| 2 |
Upload the contents of that folder, not the folder itself, to the domain’s public folder. index.html must sit right at the root. For the FTP walk-through: uploading the site with FileZilla.
|
|
| 3 |
Open the site in a private window, so you do not see a version the browser saved, and click through the links.
|
|
| 4 |
Refresh on an internal route (for example /contact). If you get a 404, follow the next section.
|
|
Why you get a 404 on refresh
In a single-page application, /contact is handled by JavaScript, in the browser. On the server there is no file with that name, so a direct request (or an F5) gets a 404. The fix is to make the server return index.html whenever the requested file does not exist. The hosting server reads .htaccess, so you create one in the public folder:RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
If you would rather not touch the server, Vue Router has a hash mode (createWebHashHistory), where addresses carry a # and never give a 404. It is less pretty, and simpler.
What you see, and what it is
| Symptom |
Usual cause |
What to do |
Blank page; the console shows 404 on .js and .css files |
The site is in a subfolder and the build assumes the root, or the files ended up in the wrong folder. |
Tell the build where it lives: base in vite.config, homepage in Create React App’s package.json, and the router’s basename. Build again. |
| 404 when refreshing a route |
The .htaccess rule is missing. |
Use the block above. |
| The old version keeps showing |
Browser cache, which kept index.html. |
Hard-reload (Ctrl+F5) or open a private window. See browser caching with .htaccess. |
API requests go to localhost |
The API address was fixed at build time. |
Set it before building, in the project’s variable (VITE_... in Vite), and build again. |
A static site has no secrets. Everything that goes into the build (including variables with a prefix such as VITE_ or REACT_APP_) is visible to any visitor. Private keys and passwords belong on a server, never in browser code. When the site has to talk to your own API, see the CORS error.
|
|
When updating, upload first, delete after. Build files have names with a code that changes on every build. If you delete the old folder before uploading the new one, anyone with the site open is left with a broken page until they reload. Upload the new files and only then remove the old ones.
|
|
Published, and the site does not look as it should? Tell us the domain and what you see.
Open a support ticket
|
RECOMMENDED PRODUCT Web hosting with cPanel Domain and SSL included, daily backups and the panel you already know. from $6.60/mo (3-year plan, with coupon) See plans |
Angola
Brasil
Kenya
Moçambique
Nigeria
Portugal
South Africa
United Kingdom
United States
International
