I need your help please!
I have made deploy and build of aplication. but when i redirect for any page i have this error:
Uncaught SyntaxError: Unexpected token <
I think it was because the browser await .html archive and chunk.js is open like this img
print from error
the route is fine, he finds the route, but don't open file.
before some search i found things like a .htaccess and i have tryied but doesn't works.
i have tryied these two models of .htacess on public/.htaccess
<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>
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
but it doesn't works too.
Server
const root = require('path').join(__dirname, 'client', 'build')
app.use(express.static(root));
app.get("*", (req, res) => {
res.sendFile('index.html', { root });
})
i don't have any webserver, sorry, but im a student, and im still learning...
please help guys!
If you using Create React App check your build/asset-manifest.json if have correct paths to the files. If not, change them manually or - what is better - change or set "homepage" value in package.json to proper one. And last tip - read carefully whole output of npm run build - it helped me. Whole bugfinding spends me 3 hours :(
you add the line of code below to index.html in the public folder
<base href="your root path">
Or you can refer to the link below:
https://skryvets.com/blog/2018/09/20/an-elegant-solution-of-deploying-react-app-into-a-subdirectory/
Related
I have React App with multiple links in it.
When i deploy in server first it is working fine , when i refresh the page it is throwing : "404 - File or directory not found. The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable. " error.
I have added .htaccess file and tried still same
.htaccess file:
RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
RewriteRule ^ ./index.html
this solved same problem on my apache server: .htaccess
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://yourwebsite.com/$1 [R,L]
So I have a react single page application that I am hosting on cpanel. I have a pretty common issue from what I have been researching but none of the post in SO have helped me so far.
I am using React Router which I know is purely client-side routing. The problem is when the user refreshes the page on a url such as https://example.com/privacypolicy I get the stand Not Found error 404.
My folder structure in cpanel is as follows:
home/mysite
public_html
all the folder from build folder (after npm run build locally)
index.html(important for the post)
.htaccess(important for the post)
The htaccess file is as follows:
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
I was hoping this was going to redirect all the requests to index.html and therefore react would know which component to render once that has been redirected.
It isn't and I'm a bit lost on what I'm doing wrong.
Any help is appreciated :)
To host ReactJS website on cPanel it is important to use homepage attribute in your package.json. For example, you can use:
"homepage": "http://example.tld"
Once you are done with setting up the homepage attribute, then run the npm build command to compile your code.
npm run build
This command will generate a folder named build in your project's root folder. Then upload the build folder contents to cPanel and use the below .htaccess file configuration.
<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>
I have created my React App, npm run build ... Put my file in filezilla,
but the problem is that I have this error
Not Found
The requested URL /main was not found on this server.
when I go to a page other than https://clickswinner.alwaysdata.net
What are you propose ?
Try creating a .htaccess file and put it at root of your server
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . index.html [L]
</IfModule>
Google is your friend
Here is an article about how to fix 404 issues for Filezilla
https://medium.com/#christine_tran/deploying-a-simple-react-application-using-ftp-filezilla-dreamhost-1e5ff6b8abd6
I have a bit of trouble with in a folder that laravel is ignoring.
In my .htacces I have a line that will ignore my folder called 'doc'.
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
RewriteEngine On
RewriteRule ^(doc) - [L] <-- this one
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} (.+)/$
RewriteRule ^ %1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
# Handle Authorization Header
RewriteCond %{HTTP:Authorization} .
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
and it works like it should.... kinda.. Example: 'localhost/doc/main.js' works fine if i type it direct into my webbrowser.
Here is my problem: in my /doc i have a 'index.html' that include/require/link some files into it from the doc dir. So in the index.html I have a line
<script data-main="./main.js" src="./vendor/require.min.js"></script>
When I go to 'localhost/doc' I get error that file cant be found (and alot others). linking to 'localhost/vendor/require.min.js'. This should be 'localhost/doc/vendor/require.min.js'
NOTE: this file is generated with ApiDocJS
Anyone have a solution for me, am stuck for about 4 hours now... am getting frustrated
I'll suggest to try to do the same in a different way.
If you're stuck for so long on a problem like that, try changing the way you are following to accomplish your goal.
Why that directory?
Why ignoring it in .htaccess?
Why not separate the logic of the app from the thing I want to hide?
Can I configure the libraries I want to use in order to specify a directory?
Can I refactor some of my code to prevent the ignore-the-dir-in-htaccess thing? (Since it's not common to do that)
That questions will move you to another direction that may or may not help you with your problem, but that's what I always do on a problem I'm stuck for more than 30 minutes, asking myself for another way of doing the same thing.
I use
$locationProvider.html5Mode(true); to remove # from url
http://seagullinteractive.com/#/about :-its work after reload
to
http://seagullinteractive.com/about :- its not work dont now the problem
You need to create .htaccess file in your root directory.
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]
Need to put above rewrite rules. Then it will be fine. When you call http://seagullinteractive.com/about then your server will look for directory with name "about" which actually will not exist and you will get 404 as a result. You need to redirect to index.html(or whichever is your page that contains ng-app) if there is no resource found on server with requested URI.