I use Nuxt.js in SPA mode in my project. But I can't properly deploy it in my server (Apache). Has anyone had that experience?
I think that the problem is in trailing slash in URL tried to set DirectorySlash Off in my .htaccess, but then it just doesn't work.
Also tried
Does not help as well:
DirectorySlash Off
#removing trailing slash
RewriteCond %{THE_REQUEST_FILENAME} /(.*)/( |$|?)
RewriteRule ^(.*)/$ $1 [R=301,L]
# internally add the slash back
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/$
RewriteRule ^(.*)$ /$1/ [L]
My project is on http://4dea.ru/works/TEST/spc/ now. If you push the button (in the section with the picture of the man on the boat on background) you will go to http://4dea.ru/works/TEST/spc/morskie-konstrukcii and everything works fine. But if you refresh the page, some pictures are missing (in the header, for example).
On the local server (Node.js) everything works fine.
Figured out two ways to do that:
1. Instead of href="image.png" use href="/image.png", so the path to the image will be absolute and accessible from every page. But this option doesn't work if the app is not located in the root directory (like in my case).
2. Load images from assets folder via href="#/assets/image.png". For styles and dynamic paths :style="{backgroundImage: ``url('${require('#/assets/boat.jpg')}')``}" can be used.
Hope it helps you ^^
Related
Currently I have a functioning React app that I am able to run on localhost:3000. My current deployment process is as follows: I ran npm run build, and uploaded that file to my shared hosting provider.
I then added a .htaccess file with
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
Then I added "homepage": ".", in the package.json. (I even tried to add the "homepage": "http://websiteexample.com", instead of the . ).
From another post I seen, I even removed the forward slashes in my index.html.
None of this seems to work and gives me a blank page with the following error in the console:
DevTools failed to load source map: Could not parse content for https://website.com/static/js/main.f532f71f.js.map: Unexpected token < in JSON at position 0
Question: How can I deploy it? Is there something I am missing?
UPDATE: I just deployed another react app, it seems as though this process works fine, but the issue is coming from one of my files... just need to figure out which one
UPDATE 2: I found the file... the error that I am getting now is:
Uncaught TypeError: (0 , kn.forwardRef) is not a function What is this? Will update again soon.
UPDATE 3: I have a modal that takes props, which is making all these issues. BUT why does it fail to render once deployed, but works on localhost? Be back soon with more answers.
Final Update:
The error was coming from the following line"
{ props.accordion1_1 ? <Accordion></Accordion> : <Typogrpahy></Typography>}
The accordion comes from React Material Ui. So I decided to add a useEffect to watch for the props.
The error was coming from the following line:
{ props.accordion1_1 ? <Accordion></Accordion> : <Typogrpahy></Typography>}
The accordion comes from React Material Ui. So I decided to add a useEffect to watch for the props.
I'm using the JavaScript History API to change URLs when a user opens a modal on my site. It works just fine, unless you refresh the page. Of course, the subdirectory doesn't exist, so it throws a 404.
I would like to redirect all folders besides my assets and download folders. I can't figure out the .htaccess for the life of me.
EDIT
This is the farthest I've gone with the regular expression:
(\/(?!assets|download).*)
This works only halfway, as it captures any subfolder after /assets/ or /download/.
My .htaccess looks like this:
RewriteEngine On
RewriteRule (\/(?!assets|download).*) index.html
Just for fullness, here's what the expression looks like when plugged into regexr.com with some test data:
I am not sure I exactly understood what you need, but let's try:
RewriteCond %{REQUEST_URI} !^/(assets|download)/
RewriteRule ^ /index.html [L,QSA]
I have used ht-access to hide .php file extension. Inside .htaccess file my code is :
# Apache Rewrite Rules
<IfModule mod_rewrite.c>
Options +FollowSymLinks
RewriteEngine On
RewriteBase /
# Add trailing slash to url
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/|#(.*))$
RewriteRule ^(.*)$ $1/ [R=301,L]
# Remove .php-extension from url
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^([^\.]+)/$ $1.php
# End of Apache Rewrite Rules
</IfModule>
It's hiding .php file extension well. But problem is that, link inside href attribute is not opening properly.
I have two files:
public_html/afiliate/product_details.php
public_html/afiliate/afiliate_login.php
Inside product_details.php I have given link of afiliate_login.php like this
Log in
Clicking Log in I should go to a page like
example.com/afiliate/afiliate_login/
But it takes me to
example.com/afiliate/product_details/afiliate_login/
And hence a 404 error
Again notice that, if i manually type this URL
example.com/afiliate/afiliate_login/
that's OK, it goes to the page as expected.
Now how I can make links work properly?
After this code:
RewriteRule ^([^\.]+)/$ $1.php
put the below code
RewriteRule afiliate_login$ afiliate_login.php [L]
basically means that any request that comes to afiliate_login will show the data from afiliate_login.php
You got that problem because in your anchor tag you are using relative url. Since your url look like this without the file extension like, example.com/afiliate/afiliate_login/ , affiliate_login/ will be also considered as a directory and the html thinks that the anchor tag is in affiliate_login/ but it in reality it does not exists there so you get 404 error.
Previously the browser considered product_details.php as a file. but now its a folder, because its product_details/
one option available here is to update the link's like this
Log in
but its always suggested like the link below
Log in
Is there any way to hide .html extension from URL using JavaScript.
FOR ex:
mysite.html hide.html here from url
You cannot achieve this through javascript, this need to be done through .htaccess file:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html
More information about mod_rewrite module here.
You can with html5, but also you can use url rewriting, or seo friendly urls, on the server side.
window.history.pushState({"html":'<html></html>',"pageTitle":'this is my title'},"", 'http://stackoverflow.com/mynewurl');
However keep in mind you can only change the url to one which is the same domain as the original!
There is a great library called history.js which helps with cross browser and version compatibility
I'm working on an app that needs to use HTML 5 mode. Due to the fact that I am migrating an existing site to use AngularJS 1.2, I cannot have '#' tags in my URL. Currently, I have the following:
angular.module('myApp', ['ngRoute']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/home", {templateUrl:'home.html', controller:'homeController'})
// other routes are defined here..
.otherwise({redirectTo: '/home'});
}]);
Unfortunately, when I visit 'http://myServer/home', my app does not work when html 5 mode is enabled. I get a 404. However, when I visit http://myServer/ it works. Its like deep-linking doesn't work when I have html5 mode enabled. If I comment out the line that says "$locationProvider.html5mode(true);", the site functions. However, once again, I cannot have hash tags in my URL due to the fact I'm migrating an existing site.
Am I misunderstanding how html5mode(true) works? Or, am I doing something wrong?
Thank you
If you're using html5mode you need make changes on the server side to return your entry point index.html (main app page) on any URL request. Then angular app will parse URL and load needed page.
Here's a list of solutions for most common web servers: Apache, nginx, IIS and express.
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode
The link is in ui-router's wiki, but it has nothing to do with it, this answer is valid with ngRoute.
I had a similar problem while setting up my app. I was trying to implement pretty URLs as the # in the URL was very disturbing. This is how I solved the problem.
Step 1: Inject the location provider in your app module and set html5mode to true
$locationProvider.html5Mode(true);
Step 2: Insert the base tag in your index.html
Some people say this is not required but I got an error when I tried removing the tag and implementing the same. It says locationProvider requires a base tag.
<base href="/specify-app-directory-here/">
If it is in the root, the following line will suffice
<base href="/">
Step 3: You will need to setup URL rewritting on your server. I, myself am a beginner but found it quite simple. If you are using an Apache just this is how you do it.
Create an .htaccess and place it in the same directory as your index.html, or you can even use an existing one. Add the following lines to the .htaccess
Options +FollowSymLinks
RewriteEngine On
RewriteBase /base-as-specified-in-base-tag/
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([a-zA-Z]+)$ #/$1 [NC,L]
The last line is what is very important. Basically it tells your server if it finds any links of the form "/home" it will redirect it to "/#/home" which angularJS can then handle appropriately. In doing so, it does not actually change the url displayed in the address bar and you have a pretty url. If you try reloading the page also, you will not get a 404 error.
Hope this helps.
first enable $locationProvider.html5Mode(true);
after enabling html 5 mode true you can insert
this code in .htaccess
BEGIN
Options +FollowSymLinks
RewriteEngine on
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) your file root /index.php [NC,L]
END