I have to deploy a React/Node application through cPanel for a school assignment, and I am having some issues. If I reload the page, I get the following error:
Not Found
The requested URL was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
I found that adding a .htaccess file will let me refresh the page, but now my API request gets the error of:
Unexpected token '<', "<!doctype "... is not valid JSON. Full response from Postman:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
<title>Decentralized Technologies</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro&family=Russo+One&family=Syne:wght#500&display=swap"
rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script defer="defer" src="/static/js/main.3d02b5b2.js"></script>
<link href="/static/css/main.e75f676e.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="backdrop-hook"></div>
<div id="modal-hook"></div>
<div id="root"></div>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init()
</script>
</body>
</html>
.htaccess file:
<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>
There is also an autogenerated .htaccess file in an API folder in my public_html folder within the cPanel finder:
# DO NOT REMOVE. CLOUDLINUX PASSENGER CONFIGURATION BEGIN
PassengerAppRoot "/home/<name>/server"
PassengerBaseURI "/api"
PassengerNodejs "/home/<name>/nodevenv/server/10/bin/node"
PassengerAppType node
PassengerStartupFile app.js
# DO NOT REMOVE. CLOUDLINUX PASSENGER CONFIGURATION END
# DO NOT REMOVE OR MODIFY. CLOUDLINUX ENV VARS CONFIGURATION BEGIN
<IfModule Litespeed>
<keys>
</IfModule>
# DO NOT REMOVE OR MODIFY. CLOUDLINUX ENV VARS CONFIGURATION END
I've tried adding the contents .htaccess that I manually created to the autogenerated one and vice-versa, but when both the and the are in the environment at the same (whether in the same file or separate), the API calls do not work. I'm at a loss for how to be able to do both of these things together and am looking for some help.
Thanks!
I was able to get this to work by adding RewriteRule ^(api) - [L] right after RewriteEngine On. The ^(api) tells the redirect to ignore rewriting all calls to that have api in the url.
Related
I am trying to deploy an app on my shared hosting service using cPanel.
My provider has the classic 'setup node js app' in the panel, i used it to activate my app under the route mywebsite.com/api.
i also hosted my Angular frontend under public_html with the following .htaccess
<IfModule mod_rewrite.c>
DirectoryIndex disabled
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>
my Front end app works but when i try to send a POST request to my backend .i.e (mywebsite/api/login) it returns the html frontend as a response.
here is what it returns :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>my frontend app</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="runtime-es2015.js" type="module"></script>
<script src="runtime-es5.js" nomodule defer></script>
<script src="polyfills-es5.js" nomodule defer></script>
<script src="polyfills-es2015.js" type="module"></script>
<script src="styles-es2015.js" type="module"></script>
<script src="styles-es5.js" nomodule defer></script>
<script src="scripts.js" defer></script>
<script src="vendor-es2015.js" type="module"></script>
<script src="vendor-es5.js" nomodule defer></script>
<script src="main-es2015.js" type="module"></script>
<script src="main-es5.js" nomodule defer></script>
</body>
</html>
is there something i missed ?
BTW :
my frontend is hosted under mywebsite.com
my backend is hosted under mywebsite.com/api
all my angular services are pointing towards /api/*
when i access my backend from mywebsite.com/api i get this :
The solution was to host the node js app on port 50000, this way i could contact it easily from the frontend. instead of using the classical setup node js app in cpanel.
I've been trying for at least 4 hours to fix this problem on my own and have scoured through several hundreds of Stack Overflow pages and other forums in search of a solution, but I can't seem to solve this simple problem.
The contents are arranged as follows:
-- index.php
-- js
- script.js
-- css
- style.css
-- images
- image.png
In the website, I needindex.php?dept=foo to be rewritten as dept/foo. This works with the following RewriteRule:
RewriteRule ^dept/(\w+)/?$ index.php?dept=$1 [NC]
But then the CSS, JS and images won't load any more.
The CSS and JS files are currently are currently included as follows:
<link rel="stylesheet" href="css/style.css" />
I tried changing the URLs to have absolute paths (i.e. /css/style.css too`, but that didn't fix it either).
How can I correctly fix the problem?
Based on your comment have this rewrite rule:
RewriteEngine On
RewriteRule ^dept/(\w+)/?$ index.php?dept=$1 [NC,L,QSA]
Then add this just below <head> section of your page's HTML:
<base href="/live/" />
so that every relative URL is resolved from that base URL and not from the current page's URL.
You can keep your CSS path as:
<link rel="stylesheet" href="css/style.css" />
Despite many topics on Open Graph, i cant seem to find anything that covers my specific problem.
I have built a site for a client which consists of a number of static html pages. since completion the client wanted social buttons added and so i have inserted all of the necessary Open Graph protocol meta tags.(see below)
<meta property="og:title" content="site name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.mydomain.co.uk/page" />
<meta property="og:image" content="http://www.mydomain.co.uk/images/image.jpg" />
<meta property="og:description" content="page description" />
When testing a selected page on the Facebook Object debugger, my included meta tags don't seem to be recognised. I think the problem could be caused by the .htaccess file i have included to remove the need for the '.html' and '.php' ...see below; I believe this is the problem as when i test my site witht he .html it seems to work just fine (so long as .html is included in the "og:url" meta tag.) but if not, all kinds of problems occur, and the description Facebook pulls up is actually the text from my css file..?
<Files .htaccess>
order allow,deny
deny from all
</Files>
ErrorDocument 404 /error404.html
Options +MultiViews
RewriteEngine on
RewriteCond %{HTTP_HOST} ^([^.]+\.co.uk) [NC]
RewriteRule (.*) http://www.%1/$1 [R=301,L]
There may be something simple im missing here but it seems to be getting the better of me. Any help would be amazing! Thanks in advance.
I started by using the method described here in order to create a Mobile redirect, and it works perfectly.
What I need to do next, however, is prevent it from happening on any page other than the homepage. In other words: If the user loads the homepage from a mobile device, the redirect should happen - but if they load any other page from a mobile device, the redirect should not occur.
I'd love any advice the community might be able to provide as to how to accomplish this effectively.
You need to redirect by checking out the User-Agent:
Mobile website redirection based on user agent
or on PHP:
<?php
$useragent = $_SERVER['HTTP_USER_AGENT'];
//mobile example
if( strpos($useragent,"Blackberry") ) {
header("Location: http://m.nickyeoman.com/");
}
//css example
if( strpos($useragent,"wii") ) { ?>
<link rel="stylesheet" href="/css/wii.css" type="text/css" media="all" />
<php } else { ?>
<link rel="stylesheet" href="/css/global.css" type="text/css" media="all" />
<php } ?>
by http://www.nickyeoman.com/blog/php/64-php-redirect
I just had to add
[OR]
RewriteCond %{HTTP_HOST} ^(mydomain\.com|www\.mydomain\.com)$ [NC]
That was it. So, in the end, it looked like
# Check if we're not already on the mobile site AND just going to the homepage
RewriteCond %{HTTP_HOST} !^m\. [OR]
RewriteCond %{HTTP_HOST} ^(mydomain\.com|www\.mydomain\.com)$ [NC]
# Can not read and write cookie in same request, must duplicate condition
Make sure you get the [or] in there too. Hopefully my newb advice will help someone someday
I have effectively used the rewrite rule to change my url from /teams.php?team=New York Yankees&year=2012 to teams/New York Yankees/2012.
My .htaccess file contains the following
RewriteEngine On
RewriteRule ^teams/([^/]*)/(^/]*)$ /teams.php?team=$1&year=$2 [L]
However, with this rewrite rule currently in effect, none of the external CSS and JS files will load. I've tried putting the following rewrite condition before the rewrite rule with no luck
RewriteCond %{REQUEST_URI} !^/(css/js)/
Almost all of my files have the following link to the external stylesheet.
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
Any ideas what I'm doing wrong here?
Thanks
You will have to use full paths when linking to your stylesheets, not relative paths like you have now. With the rewrite rules in place they become relative to the pre-rewritten URL.
For example, change:
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
to:
<link rel="stylesheet" type="text/css" href="/css/stylesheet.css" />
The reason they are not loading is because the browser is trying to access:
http://yoursite.com/teams/New York Yankees/2012/css/stylesheet.css
when you link to css/stylesheet which of course does not exist.