I am trying to run Angular 4 on Apache 2 on Fedora 25.
$ ng build --prod --bh /root/beans3/dist/
Produces the dist directory as expected. Next I pointed the Apache to that directory in
/etc/httpd/conf/httpd.conf (all the comments have been removed),
ServerRoot "/etc/httpd"
Listen 139.162.199.9:80
Include conf.modules.d/*.conf
User apache
Group apache
ServerAdmin root#qqiresources.com
ServerName www.qqiresources.com:80
<Directory />
AllowOverride none
Require all granted
</Directory>
DocumentRoot "/root/beans3/dist"
<Directory "/root/beans3">
AllowOverride All
Require all granted
</Directory>
<Directory "/root/beans3/dist">
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
</Directory>
<IfModule dir_module>
DirectoryIndex index.html
</IfModule>
<Files ".ht*">
Require all denied
</Files>
ErrorLog "logs/error_log"
LogLevel warn
<IfModule log_config_module>
LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
LogFormat "%h %l %u %t \"%r\" %>s %b" common
<IfModule logio_module>
LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
</IfModule>
CustomLog "logs/access_log" combined
</IfModule>
<IfModule alias_module>
ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"
</IfModule>
<Directory "/var/www/cgi-bin">
AllowOverride None
Options None
Require all granted
</Directory>
<IfModule mime_module>
TypesConfig /etc/mime.types
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType text/html .shtml
AddOutputFilter INCLUDES .shtml
</IfModule>
AddDefaultCharset UTF-8
<IfModule mime_magic_module>
MIMEMagicFile conf/magic
</IfModule>
EnableSendfile on
Theses config settings tell Apache to server the index.html at /root/beans3/dist
Restarting the server with,
$ systemctl restart httpd
Navigating to 139.162.199.9 I can see that Apache is running the index.html file in /root/beans/dist
However the other files in that directory as not being found. This is strange since they are in the same directory as index.html
/root/beans3/dist/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Beans3</title>
<base href="/root/beans3/dist/">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<!--<meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- <link rel="apple-touch-icon" href="apple-touch-icon.png"> -->
<!-- Place favicon.ico in the root directory -->
<!-- <link rel="stylesheet" href="css/normalize.css"> -->
<!--<!– Latest compiled and minified CSS –>-->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
<!-- <link rel="stylesheet" href="css/main.css"> -->
<!-- <script src="js/vendor/modernizr-2.8.3.min.js"></script> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.604a57bc7d4c0f84e447.bundle.css" rel="stylesheet"/></head>
<body>
<script>
window.__theme = 'bs4';
</script>
<app-root>Loading...boo ya!</app-root>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
// window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')
</script>
<!-- <script src="js/plugins.js"></script> -->
<!-- <script src="js/main.js"></script> -->
<script type="text/javascript">
</script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>-->
<!-- <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNjfWKTRj_IlQ6nPTSXDeKKM7yoEnauNI&callback=getLocation"></script> -->
<script type="text/javascript" src="inline.df954263324e7c133385.bundle.js"></script><script type="text/javascript" src="polyfills.a3e056f914d9748ff431.bundle.js"></script><script type="text/javascript" src="vendor.244ceb2ee1e4bb317079.bundle.js"></script><script type="text/javascript" src="main.47083d1d3073f3856af7.bundle.js"></script></body>
</html>
the issue is in index.html <base>
please change <base href="/root/beans3/dist/"> to <base href="/">
since you are setting the DocumentRoot in your config to that path.
or remove -bh <path> and just use ng build --prod
Related
I'm trying to deploy a React Web App on a Debian VM using nginx.
My root points to the build folder in my git repo (/home/myuser/Projects/mysite/build). This way I can update my app by git pull whenever I make a change.
I have created a conf file in /etc/nginx/conf.d/react.conf, and it looks like:
server {
listen 80;
root /home/myuser/Projects/mysite/build;
index index.html index.htm;
access_log /var/log/nginx/siteoneway.access.log;
error_log /var/log/nginx/siteoneway.error.log;
location / {
try_files $uri $uri/ =404;
}
}
In /etc/nginx/nginx.conf, I comment this line (include /etc/nginx/sites-enabled/*):
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
# include /etc/nginx/sites-enabled/*;
}
So, when I access http://mypublicIP, the browser just shows a blank white screen. If I press F12, I see content of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="My Site Name"/>
<title>My Site Name</title>
<link rel="icon" href="/favicon/favicon-32x32.png"/>
<link rel="apple-touch-icon" href="/favicon/android-chrome-192x192.png"/>
<link rel="manifest" href="/manifest.json"/>
<script defer="defer" src="/static/js/main.cd92e2ed.js"></script>
<link href="/static/css/main.5b13449a.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
, but the site is not opening.
After a few hours, I found the error. There was an error setting on package.json, the "homepage" property was filled with an incorrect value.
I used webpack to bundle all my files.
I have a bundle.js file in a directory with an index.html
When i open it in browser it gives me an error :-
Warning: [react-router] Location "/home/vivek/Desktop/prismo-front/build/index.html" did not match any routes
My file directory looks like this : -
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Prismo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">ds</div>
<script type="text/javascript" src="bundle.js" charset="utf-8">
</script>
</body>
</html>
Run the following to serve your files locally.
Install: npm install -g http-server.
cd into build
run http-server
go to http://localhost:8080/ in browser
OR upload your files to a server and you won't get this problem. You can't use run your index.html file locally as it doesn't play nicely with History which is used for React Router.
var app = angular.module("myApp", ["ngRoute","ui.router"]);
app.config(function($routeProvider,$urlRouterProvider,$locationProvider,$provide, $stateProvider) {
$routeProvider
.when("/", {
templateUrl : "templates/main.htm"
})
.when("/london", {
templateUrl : "templates/london.htm",
controller:"ctrl"
})
.when("/paris", {
templateUrl : "templates/paris.htm"
});
$locationProvider.html5Mode(true);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Example</title>
<base href="/simpleAnjularjs/" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp">
<!-- routeProvider -->
Red
Green
<div ng-view></div>
<!-- stateProvider -->
<!-- <a ui-sref="red">Red</a>
<a ui-sref="green">Green</a>
<div ui-view></div> -->
<!-- <script src="js/angular.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script> -->
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="js/Angularjs_ui_routing.js"></script>
<script src="app.js"></script>
</body>
</html>
where other templates(london.html,paris.html,main.html) used are normal html pages with a default tag and when i reload any of the pages i'm getting an error saying "The requested URL /simpleAnjularjs/paris was not found on this server"
How to: Configure your server to work with html5Mode
When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side rewrites.
Apache Rewrites
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
Azure IIS Rewrites
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
Using ui-router with AngularJS application, It don't render the views correctly.
That's the app.js file implementation:
'use strict';
angular.module('myApp', [
'ngCookies',
'ui.router'
]);
angular.module('myApp').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$httpProvider',
function($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider){
// Login Route
$stateProvider.state('login', {
url: '/login',
templateUrl: '/app/views/login.html',
controller: 'loginController'
});
$stateProvider.state('home', {
url: '/home',
templateUrl: '/app/views/home.html'
});
$urlRouterProvider.otherwise('/home');
$locationProvider.html5Mode(true);
}]);
And that's the index.html:
<!DOCTYPE html>
<html class="no-js" lang="en" data-ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./vendor/bootswatch/bootstrap.css" media="screen">
<link rel="stylesheet" href="./vendor/bootswatch/bootswatch.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/style.css">
<script src="./bower_components/angular/angular.min.js"></script>
<script src="./bower_components/angular-route/angular-route.min.js"></script>
<script src="./bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="./app/app.js"></script>
<script src="./app/modules/login/module.js"></script>
<script src="./app/modules/home/module.js"></script>
</head>
<body data-ng-cloak>
<div class="container" data-ui-view></div>
<script src="./vendor/jquery/jquery-1.10.2.min.js"></script>
<script src="./vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="./vendor/bootswatch/bootswatch.js"></script>
</body>
</html>
The problem is that when starting the app and passing to the browser this url (localhost:8000/login) or (localhost:8000/home), It responds with (Not Found)
The cause of this problem is that the URL don't contain the '#'.
Example:
[localhost:8000/#/home] --> works well
[localhost:8000/home] --> don't work at all and shows "Not Found"
The problem is with your .html5Mode(true). You need to update your .htaccess. It all depends on your application, but here is an example of what you can do. This has worked for many Apache users, so hopefully, it will work for you as well.
You also need to take care of the the known <base href> bug found here
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
Source: This post.
I've been trying make http://prerender.io work for my website.
I'm pretty sure I've been following their instructions correctly, but when I run the website through with the Googlebot simulator, then it shows that it's not reading the site correctly.
I've been following the guidelines here:
https://prerender.io/getting-started
My website is called www.justbuythisgame.com
I have this in my .htaccess:
<IfModule mod_headers.c>
RequestHeader set X-Prerender-Token "MyTokenIsCorrectAswell"
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
<IfModule mod_proxy_http.c>
RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot [NC,OR]
RewriteCond %{QUERY_STRING} _escaped_fragment_
# Only proxy the request to Prerender if it's a request for HTML
RewriteRule ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent))(.*) http://service.prerender.io/http://justbuythisgame.com/$2 [P,L]
</IfModule>
</IfModule>
I have also added this to my header, even tho it should have no effect on how google crawls the index.html
<meta name="fragment" content="!">
This is what it shows me when I crawl the site, where you can see that it's not getting any of HTML
HTTP/1.1 200 OK
Date: Tue, 22 Apr 2014 09:49:43 GMT
Server: Apache
Last-Modified: Tue, 22 Apr 2014 09:37:23 GMT
Accept-Ranges: bytes
Cache-Control: max-age=0
Expires: Tue, 22 Apr 2014 09:49:43 GMT
Vary: Accept-Encoding
Content-Encoding: gzip
X-UA-Compatible: IE=edge
Content-Length: 1983
Keep-Alive: timeout=3, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="title" content="Just Buy This Game" />
<meta name="description" content="JustBuyThisGame is a website that collect data about the most played games, from different websites. We use this data to create a simple list where you easily can see which trending game is the most popular and best rated. If you buy any of the games we suggest, you won't regret it!">
<meta name="robots" content="index,follow" />
<meta name="language" content="en" />
<meta name="viewport" content="width=device-width">
<meta name="fragment" content="!">
<base href="/">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/select2/select2.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<script src='https://cdn.firebase.com/v0/firebase.js'></script>
<!-- endbuild -->
</head>
<body ng-app="justbuythisgame" ng-cloak>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-include src="'views/layout/header.html'"></div>
<div ng-view></div>
<div ng-include src="'views/layout/footer.html'"></div>
<!-- Add your site or application content here -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script src="bower_components/foundation/js/vendor/jquery.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.reveal.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.topbar.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!-- endbuild -->
<script src="scripts/app.js"></script>
<script src="scripts/filters.js"></script>
<!--<script src="scripts/controllers/main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.4/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.4/angular-route.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>
</body>
</html>