After doing npm run build I uploaded index.html and the dist folder to my remote server yet the app doesn't work properly: there's no styles at all, routes don't work and most UI elements don't load.
Strangely, the exact same index.html + dist folder, copied anywhere on my local server, works perfectly either as file protocol or http protocol.
I have no idea what to make of this and I can't troubleshoot it because there's no error message in the console even though the app doesn't work. Any suggestion welcome.
Note: I use vue-cli / webpack-simple
If your provider is running Apache web server, upload to the same directory you uploaded your SPA app the .htaccess file with this content:
<ifModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html [QSA,L]
</ifModule>
Related
I have created a subdomain test.example.com from cPanel. I then built my Vue app using
npm run build
and zipped the whole dist folder to upload to the server. Once uploaded I expanded the zip file so the files are on the server.
This works perfectly for my home page, check, however, any of the subpages return the 404 while this issue is not observable on the localhost.
I don't understand how to fix this.
I use the vue.config.js with
module.exports = {
publicPath: '/'
}
and also the links to subpages look fine but just don’t work.
You are using history mode in your router, in order for it to work all requests need to go back to index.html
All you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in.
Since you are using cPanel I would assume that your server is using Apache.
Therefore you will need to create a .htaccess file to redirect all requests to index.html. You will need to create the .htaccess file inside your public_html folder (assuming that is where your application code lives). Then add the following.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
I deployed a Vue App on an hosting platform, i got to know that if i serve
"www.mydomain.com/about" and hit enter, i get 404 Error Page. have i deployed the wrong thing?
npm run build
note: the dist folder was deployed after build
Text
but when you remove /about, the real page got served, and also when you click on the links on the navbar, it shows the about pages. but when you refresh the pages, it return 404 Error.
Why is this so?
You need to config your server because, you are resolving the routes with the server, and not with vue (When you click on the navbar and go to /about, you can access, because you are resolving the route with vue).
Check this link
Uou are using Vue router's history mode. For any page URL to work for vue in this case you will have to make some changes in your web server's configuration. Here are 2 of the most common config settings. Make these changes, restart your web server and your issue will be resolved.
Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
nginx
location / {
try_files $uri $uri/ /index.html;
}
Full documentation available at https://router.vuejs.org/guide/essentials/history-mode.html.
I have a folder in my web root called docs and I need to ensure that files in this directory cannot be accessed by non authenticated users.
I have a file in this directory called index.php that verifies whether the user is logged in and serves up the requested file accordingly.
So in order to catch requests for files, in docs I have created the following .htaccess file
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !index.php
RewriteRule ^(.*)$ index.php?requested_file=$1 [QSA,L]
</IfModule>
This works if I navigate to /docs/index.php then index.php is called. However if I navigate to /docs/cat.jpg then I am sent directly to cat.jpg. But I shouldn't be able to access this file...
Can anyone advise what I am doing wrong here please?
Well I tried your exact code on my Apache based stack and it works fine
So There is nothing wrong with your apache instructions
May be you are using php or IDE's inbuilt live servers. For that to work you need apache based stack like Lampp, Wampp, Xampp or Mampp.
I am using a webpack simple but after deploying my app to an hosting server my index page works fine but other pages gives a 404 error .Please i dont know if anyone have any idea what is happening .The webpack simple only generate build js file for me and thats all, i dont get an index.htm file in my dist folderc
I am going to show you how to do it but before read this from vue.js docs
Step 1
Run the following command
npm run build
Step 2
Copy the dist folder and put it in a new folder
Step 3
In the new folder create a new file and name it .htaccess
Step 4
Inside .htaccess file insert the following code
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Now you application is ready to deploy!You can even run it using apache on local machine.
Please again, read docs you can find more configurations there for nginx, node.js and learn more about all server configurations.
Additional info: I am using laragon + apache and after the step 4, I put the new folder inside www directory of Laragon, and serve it with Laragon. I guess you can do the same by using xampp or wamp by putting the new folder in docs directory.
That is due to the history push mode on your vue router.
If you use Apache, follow these steps, else you can read the vuejs doc https://router.vuejs.org/guide/essentials/history-mode.html:
If Apache version is above 2.2, you can use Fallback ressource instead of mod_rewrite in your apache config. It works for me.
In /etc/apache2/apache2.conf
<VirtualHost *:80>
ServerName YourServerName(like yourwebsite.com)
DocumentRoot /var/www/yourAppLocation/dist
<Directory "/var/www/yourAppLocation/dist">
FallbackResource /index.html
</Directory>
</VirtualHost>
Or you can use classical mod_rewrite
<VirtualHost *:80>
ServerName YourServerName(like yourwebsite.com)
DocumentRoot /var/www/yourAppLocation/dist
<Directory "/var/www/yourAppLocation/dist">
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
</Directory>
</VirtualHost>
You need to set up your hosting to route every 404 error to index.html and let vue handle the errors , which hosting are you using? if you cant set up your error pages you could remove mode:'history' mode from your router or use hash mode instead, here is the official docs to how to setup your host, as for your index.html you can find it in your project root not in dist folder
I have react app running on apache2.
In my app, there are 3 pages: home, about, register
I have 3 route like this:
<Route path="/home" component={....} />
<Route path="/about" component={.....} />
<Route path="/register" component={....} />
So, app works perfectly, when I go to www.onlyexampleurl.com, app is loaded correctly. I can list in home, about, register fine.
But, problem is, when I go directly to www.onlyexampleurl.com/about i am getting 404 from apache, because app is download from root path '/'.
How can I fix it? When I put www.onlyexampleurl.com/about to browser I want load about page from my app, but I am gettint 404 from apache.
Thank you for any help!
You need to redirect all requests to your entry file (assume it's index.html). Put in .htaccess:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
This is standard solution for Single Page Apps.
This is a late response to the question, but I though I'd share what worked.for me, in case anyone bumps into the same problem.
This is assuming Ubuntu OS, I have not been successful for Linux:
I've followed certain steps from this post from Reddit and I can attest this works for making SPAs run in Apache web server with proper routing.
To quote:
1) In the apache2.conf located in etc/apache2/ I turned AllowOverride to All. I also added Servername localhost in the file. (I somehow skipped this last sentence, but still it worked fine in the end)
<Directory /var/www/>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
2) In the hosts.debian.tmpl file found in /etc/cloud/templates I added 127.0.0.1 <yourdomain.com> to the file where the other ips of the similiarity are.
127.0.0.1 yourdomain.com
3) I ran sudo a2enmod rewrite. Then I restarted the apache server via service apache2 restart. This turns on mod_rewrite.
Lastly inside of my project folder /var/www/html , along side my index.html file I created a .htaccess file and added in the following:
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]
End quote
Assuming you've run npm run build and then copied all the contents inside the build folder to your public directory, this should work.
When I first started web dev, I wasn't really sure I made the VirtualHost config right, so what I usually did was first to make a dummy index.html with, say, Hello World example. When I've confirmed that I'm able to see Hello World in the browser (which means I got the VirtualHost config right), I dump the contents of the build folder to where the dummy index.html was.
Hope this helps you now as much as it did for me!