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.
Related
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.
I have a big problem to redirect a website. It is about 4100 pages large and I need a solution to redirect all pages automatically. The problem is that there are to many pages to do every page manually. For example...
I have a structure like this
car.com/audi.html
car.com/ford.html
...
And I need to redirect to
car.com/audi/
car.com/ford/
But my problem is the big number of pages. Is there a command or something that can redirect all pages in one? Or have I to redirect every single page?
You can work around this
<html>
<head>
<title>CAR.COM</title>
<meta http-equiv="refresh" content="0; URL=LINK_TO_DIRECTORY">
<meta name="keywords" content="automatic redirection">
</head>
<body>
</body>
</html>
If you want to redirect .html requests to non-html (from old to new) you can use the following 1 liner redirect in htaccess :
RedirectMatch 301 ^/((?!index).+)\.html$ http://example.com/$1
I'm using react-router with .htaccess and browserHistory. If I understand it correctly, .htaccess file redirects the url to index.html when user addressed url that is only available from front-end and not available from the server. I copied and pasted the .htaccess rule from https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md and basically it's like below:
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
The problem is that it doesn't use right js file when user enters sub-route. Let say I have two files in var/www - index.html, bundle.js.
Inside of index.html,
<body>
<div id="content" class="content-div"></div>
<script src="bundle.js" ></script>
</body>
Inside of bundle.js,
render((
<Router history={browserHistory}>
<Route path="/" component={AppComponent}>
<Route path="post" component={PostComponent}>
<Route path=":postid" component={PostItemComponent}></Route>
</Route>
</Route>
</Router>
), document.getElementById('content'));
It works okay at main page - example.com. But when I enter example.com/post/1, the browser shows me blank page because it tries to access example.com/post/bundle.js which is not there (I don't even have post folder under var/www).
I could temporarily fix the problem by creating var/www/post folder and place bundle.js file into the folder. But I don't think that's right way to do it. Can someone please guide me how I could fix it, so that it always uses var/www/bundle.js whichever sub-sites user enters?
Use a root-relative path for your script tag:
<body>
<div id="content" class="content-div"></div>
<script src="/bundle.js" ></script>
</body>
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" />
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.