So I'm trying to set up prerender.io for my AngularJS application with a ExpressJS backend following this tutorial. I have done exactly as instructed, the only difference being I have enabled HTML5mode. I have included the meta(name="fragment" content="!") in my index.jade and the prerender token to my server.js file (using the prerender-node package) but somehow my pages do not seem to be cached or generate any crawl stats.
config.coffee
angular.config ['$stateProvider','$urlRouterProvider','$locationProvider','toastrConfig',($stateProvider, $urlRouterProvider,$locationProvider,toastrConfig)->
$stateProvider
.state 'home',
url:'/'
templateUrl: 'html/main.html'
controller:'mainController'
$urlRouterProvider.otherwise '/'
$locationProvider.html5Mode
enabled: true
requireBase: false
$locationProvider.hashPrefix '!'
]
Server.JS
// Here we require the prerender middleware that will handle requests from Search Engine crawlers
// We set the token only if we're using the Prerender.io service
app.use(require('prerender-node')
.set('prerenderServiceUrl', 'http://www.mydomain.co.com/')
.set('prerenderToken', 'my-token'));
// HTML5MODE settings
// ------------------------------------------------------
app.use('/js', express.static(__dirname + '/public/js'));
app.use('/css', express.static(__dirname + '/public/css'));
app.use('/html', express.static(__dirname + '/public/html'));
// Routes
// ------------------------------------------------------
require('./app/js/routes/routes.js')(app);
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('/public/index.html', { root: __dirname });
});
You should remove this line from your config:
.set('prerenderServiceUrl', 'http://www.mydomain.co.com/')
The service URL should point to a Prerender server, so you shouldn't set that to your website URL.
I think you should make sure that you have implemented the correct prerender.io configuration in your Angular App.
I tested the below code and correctly cached it in the prerender.io dashboard.
File: ../static/routes.json content
["/","/content/terms-conditions","/content/about-us",..]
File: /config/webpack.production.js
const axios = require('axios');
const routesData = require('../static/routes.json'),
console.log("PRERENDER.io caching start for Crawler Bots to SEO indexing");
const host = 'your domain name with http or https';
const prerenderToken = '****';
const prerenderUrl = 'https://api.prerender.io/recache';
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
console.log("Start date time : "+dateTime);
for (const route of routesData) {
const fullRoute = host + route + '/index.html';
console.log(`Caching URL ${fullRoute}`);
var prerednerData = {
'prerenderToken': prerenderToken,
'url': fullRoute
};
axios.post(prerenderUrl, prerednerData)
.then((response) => {
console.log('Product URL: '+prerednerData['url']);
console.log('Status Code: '+response.status);
})
.catch((error) => {
console.log('Product URL: '+prerednerData['url']);
console.log('Error: '+error);
});
}
File: .htaccess
Options -Indexes
<IfModule mod_headers.c>
RequestHeader set X-Prerender-Token "****"
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
# Pre-render HTML for search crawler bots to indexing
<IfModule mod_proxy_http.c>
RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR]
RewriteCond %{QUERY_STRING} _escaped_fragment_
# Only proxy the request to Prerender.io 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|\.ttf|\.woff|\.svg))(.*) http://service.prerender.io/https://www.globalshop.com.au/$2 [NE,L,R=301]
</IfModule>
RewriteCond %{HTTP_HOST} www.domainname.com$ [NC]
RewriteRule ^(.*)$ https://www.domainname.com/$1 [R=301,L]
RewriteCond %{HTTP_HOST} !^www\. [NC]
RewriteRule ^robots\.txt$ robots-disallow.txt [L]
RewriteCond %{HTTP:X-Forwarded-Proto} =http
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html
</IfModule>
Cheers!
Related
I am Getting error as "404 not found" when refresh page in react js. it's working on localhost but when i moved code on server then Getting this error.
I encountered this as well and has to do with server configuration. What you need to do is configure your server that when visiting /*, return your index.html.
Now you probably only have / configured to return index.html.
How to do that, depends on your technology:
Express
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
if (err) {
res.status(500).send(err)
}
})
})
Apache Htaccess
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
You will have to configure your server in a way that if no resource is found for a request then the server should always return an index.html file.
You can use the below code:
if(process.env.NODE_ENV==='production'){
app.use(express.static('client/build'));
const path=require('path');
app.get('*',(req,res)=>{
res.sendfile(path.resolve(__dirname,'client','build','index.html'));
})
}
I want to create and retrieve users in my WordPress site using an AngularJS client application. I am using WP REST API (Version 2) plugin and JWT Authentication for WP REST API plugin. I am using the following code:
(function() {
var app = angular.module('jwtAuth', []);
app.config(function($httpProvider) {
$httpProvider.interceptors.push(function() {
return {
'request': function(config) {
var token = localStorage.getItem("token");
if (token) {
config.headers.Authorization = 'Bearer ' + token;
}
return config;
}
};
});
});
app.controller('MainController', function($scope, $http) {
var apiHost = 'http://mytechpen.com/wp-json'
localStorage.removeItem("token");
$http.post(apiHost + '/jwt-auth/v1/token', {
username: 'test1',
password: 'test123'
})
.then(function(response) {
console.log(response.data.token)
localStorage.setItem("token", response.data.token);
$http({
url: apiHost + '/wp/v2/users',
method: 'POST',
data: {
username: 'test4',
password: 'test123',
email: 'test4#gmail.com'
},
header: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + response.data.token
}
})
.then(function(response) {
console.log(response.data)
})
.catch(function(error) {
console.error('Error', error);
});
})
.catch(function(error) {
console.error('Error', error);
});
});
})();
I am getting the token in the first request. But there is an error occurring in the 2nd request. That is:
I thought this is a CROS issue, so I added
Header add Access-Control-Allow-Origin "*"
To the .htaccess file. After that I am not able to get the token, I am getting an error saying Access-Control-Allow-Origin' header contains multiple values.
Here is my htaccess file without the Access-Control-Allow-Origin' header.
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
</IfModule>
# END WordPress
Apart from that I have added the configurations mentioned in JWT plugin document to wp-config file as well.
it work for me
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
I just added this:
RewriteEngine On
RewriteRule .* - [E=REMOTE_USER:%{HTTP:Authorization}]
I have trouble setting up the .htaccess for laravel and angular 2.
When I refresh the browser window I get a 404 page and try to avoid the html5 hashbang strategy.
I use routing from both Angular 2 and Laravel. The Laravel routing is used for retrieving templates (templateUrl in angular).
I started with https://github.com/sanex3339/laravel-5-angular-2-example
<IfModule mod_rewrite.c>
<IfModule mod_negotiation.c>
Options -MultiViews
</IfModule>
RewriteEngine On
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]
# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]
</IfModule>
I found out another way to solve it:
App\Http\routes.php
Prefix all your Angular routes with '/api'
// Angular 2 base route resolving
Route::get('/', [
'uses' => 'JSControllers\AngularRoutesController#index',
'as' => 'home'
]);
Route::group(array('prefix' => 'api'), function()
{
// Angular 2 base `/edit` route resolving
Route::get('/edit', 'JSControllers\AngularRoutesController#index');
// Angular 2 templates route
Route::get('/templates/{template}', 'JSControllers\AngularTemplatesController#index');
// API route
Route::post('/api/upload-file', 'JSControllers\UploadController#uploadFile');
// Angular 2 templates route
Route::get('/blogdata', 'JSControllers\AngularDataController#blog');
});
App\Exceptions\Handler.php
public function render($request, Exception $e)
{
if($e instanceof NotFoundHttpException)
{
return Response::view('backend.content');
}
return parent::render($request, $e);
}
I'm trying to host an angularjs SPA on parse.com
I haven't uploaded any server code for now (they're just static files!)
https://app.hybridrecruitment.com
The following link will work: https://app.hybridrecruitment.com/#/pages/auth/register
While https://app.hybridrecruitment.com/pages/auth/register will return page not found.
Can you please advise on the cloud code equivalent to this .htaccess?
<IfModule mod_rewrite.c>
RewriteEngine On
# Send all requests to the index.html unless
# it's a directory or a file that actually exists
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]
</IfModule>
Got a solution by myself. Don't know if it's the most logical. But it works.
Basically on each request I grab and serve the index.html.
var express = require('express');
var app = express();
//push state interceptors
var pushUrlPrefixes = [""];
var index = null;
function getIndex(cb) {
return function(req, res) {
Parse.Cloud.httpRequest({
url: 'my_url_here', // works only in http
success: function(httpResponse) {
index = httpResponse.text;
cb(req, res);
},
error: function(httpResponse) {
console.log('error');
console.log(httpResponse);
res.send("We're very busy at the moment, try again soon:"+httpResponse.text);
}
});
}
}
pushUrlPrefixes.forEach(function(path) {
app.get("/"+path+"*", getIndex(function(req, res) {
res.set('Content-Type', 'text/html');
res.status(200).send(index);
}));
});
i am building an AngularJS app this is what i have atm:
App.js
var youtubeTrackerApp = angular.module('youtubeTrackerApp', [
'youtubeTrackerControllers',
'youtubeTrackerServices'
]);
Services.js
var youtubeTrackerServices = angular.module('youtubeTrackerServices', ['ngResource']);
youtubeTrackerServices.factory('YouTubeVideo', function($http) {
var YouTubeVideo = function(data) {
angular.extend(this, data);
}
YouTubeVideo.get = function(id) {
return $http.get('/Api/YouTubeVideo/' + id).then(function(response) {
return new YouTubeVideo(response.data);
});
};
YouTubeVideo.prototype.create = function() {
var youTubeVideo = this;
return $http.post('Api/YouTubeVideo/', youTubeVideo).then(function(response) {
youTubeVideo.id = response.data.id;
return youTubeVideo;
});
}
return YouTubeVideo;
});
The issue is that Angular is posting like this:
http://localhost/Api/YouTubeVideo/123
And while i am developing, i need it to post to
http://localhost/youtubetracker/web/app_dev.php/Api/YouTubeVideo/123
Since i am using Symfony. I am quite new to AngularJS, the and i cant seem to figure out how to inject a base URL between the localhost and endpoint.
Any other tips combining Symfony and Angular are welcome.
when using a PHP end point i would suggest hacking into the .htaccess file
Something like this
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-s
RewriteRule ^(.*)$ api.php?x=$1 [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^(.*)$ api.php [QSA,NC,L]
RewriteCond %{REQUEST_FILENAME} -s
RewriteRule ^(.*)$ api.php [QSA,NC,L]
http.get youtubetracker/web/app_dev/Api/YouTubeVideo/123
php api file in youtubetracker/web/app_dev/Api/
im assuming that YouTubeVideo & 123 params