I have typically used Angular to create whole websites rather than for parts of a website but now I would like to separate the homepage for SEO purposes so that it's a static HTML file and not part of the AngularJS app.
I'm using ExpressJS on the back-end but I'm not sure how I would serve the index.html and the app/index.html separately. Could someone point me in the right direction?
In server.js I normally have something like this:
app.use(function(req, res) {
res.sendFile(__dirname + '/app/index.html');
});
but what do I need to do to be able to deliver index.html if the user goes to the homepage and app/index.html if the user navigates to /somewhere
I'm trying to avoid the cost of an extra Heroku Application fee if at all possible?
See the code below. You will setup a rule wherein if the url is /home (or whatever your homepage path is), you send the user to index.html and after all the rules (if you have more rules) you will have a catchall rule where you will send user to app/index.html.
app.route('/home')
.get(function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.route('/*')
.get(function(req, res) {
res.sendFile(__dirname + '/app/index.html');
});
};
Related
I am using nodejs / express as the server side to my web application.
Another developer no longer working with me merged the angularjs dist bundle with the server application so that running "node index.js" it would serve the angular front end content and the server side api at the same time. It was to improve the slow load.
Since making the nodejs back end serve the ../dist folder front end I have an issue I am trying to resolve around routing.
There is a catch all route that I have current commented out as seen below.
When this is commented out I can hit all the api end points but it will not serve the angularjs content from ../dist folder.
When the catch all route is not commented out it servers up my angular content but cannot reach any of my api endpoints. All calls to the api end points return 200 but never hit the api end points.
Order matters when defining routes. If your first entry is a catch-all, then it will literally catch everything, even requests to /api. So place your catch-all as the very last entry:
app.get("/api", function(req,res) {
res.json({
message: "Hello World!"
});
});
app.get("*", function(req,res) {
res.sendFile(__dirname + "/dist/index.html");
});
It's also wise to explicitly declare your SPA route, even if you already have a catch-all:
app.get("/", function(req,res) {
res.sendFile(__dirname + "/dist/index.html");
});
app.get("/api", function(req,res) {
res.json({
message: "Hello World!"
});
});
app.get("*", function(req,res) {
res.sendFile(__dirname + "/dist/index.html");
});
Like many other clean angular URL rewrites, upon refreshing the page on a clean URL like localhost:3000/profile I get the GET /profile 404 error. I have been trying to use an Express Rewrite to send the index.html file, but as far as I know, I don't have an index.html to send, as it's not rendered until the index.js route.
I tried the following in my app.js:
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: __dirname });
});
and receive Error: ENOENT: no such file or directory, stat 'C:\xampp\htdocs\healthyu\healthyu\index.html'
My directory looks like this image here, and I can see there is no index.html file in the root directory. I have tried views/index.html, views/index.ejs, and views/index with no luck, and views/index.ejs actually prompted a download when I refreshed the page.
Is there a way to use Express to successfully rewrite the URLs, or will I be more successful with a mod-rewrite in an .htaccess file?
So what I needed to do was change all of my server requests that were API requests to use the /api prefix, so get /api/posts in order to reduce conflicts with get /posts which was the original API call and view name along with other conflicts.
My index.html is generated in my express routes/index.js file so I just needed to make sure I used that file whenever I tried to navigate to a different URL than the home entry point. The relevant parts of the code looked like the following:
var index = require('./routes/index');
var users = require('./routes/users');
app.use('/', index);
app.use('/api', index);
app.use('/users', users);
app.use("/*", index);
I have a strange issue with UI router and Express interacting together.
I've looked for solutions everywhere but nothing seems to be completely fixing the issue working.
When my app is in my /public folder and when i navigate to / it works fine and the url is getting changed as i click links.But whenever i go directly to /random/path ( ui-sref="post/new"> ), it get intercepted by nodejs and say that this route doesn't exist.
I've fixed that issue using from a topic on that issue :
app.use('/', express.static(__dirname + '/public'));
app.use(function (req, res) {
res.sendFile(__dirname + '/public/');
});
And now everything is working fine whenever i navigate directly to the path i want.
Now there is a new issue where the whole page will reload on every path change instead of just behaving like a client side app should and just load the view + controller.
The strange thing is that it's working as expected for 2 or 3 path.
Can anyone help ?
edit :
angular.module('App').config(function($stateProvider, $locationProvider,$urlRouterProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider
.state('posts-new', {
url:'/post/new',
templateUrl: 'tmpl1.html'
})
.state('posts', {
url:'/posts',
templateUrl: 'tmpl2.html'
});
});
I've also tried with both base url / and <base href="/index.html">
Alright, so your NodeJS route not existing is because of your route.
It works fine for / because it interprets that as /public/index.html.
If you then try and load /post/new, it looks for /public/post/new/index.html - and doesn't find it.
Fix below should work for you.
app.use(function (req, res) {
res.sendFile(__dirname + '/public/index.html');
});
Then, you'll need a slightly separate way of serving your templates - basically as static files! I'd personally suggest you use a simple folder for templates, as shown below. Make sure this is above your catchall route above.
app.use('/templates', express.static('/public/templates'));
Oh, and finally - you'll want your <base> tag set to /.
I have an angular app in html5 mode, and a node.js express back-end using the following snippet I can redirect everything back to the route:
app.use('/*', function(req, res){
res.sendFile(__dirname + '/public/index.html');
});
But because of this my ng-include will no longer work:
ng-include="'app/img/svg/star.svg'"
How can I allow certain file types that say end in '.svg' to still be loaded?
I am trying to use html5mode in angular, so that I can bookmark a page like http:/myhost/products (where /products is a route defined by$stateProviderRef.state(xxx) ).
To that end I've
added $locationProvider.html5Mode(true) to my app config
added 'base href="/"' (with the <>) to my index.html
added the catch all rewrite to my server.js in node.js
app.get('*', function(req, res) {
res.redirect('/');
});
restarted the node server
so what happens is that the app starts ok, all navigation works, I can go to http://myhost/products and everything works well.
However, if I press refresh at this point, I am redirected back to the index page. Looks to me as if ui-router is either losing the path (/products) or I have missed something in the config / setup
I have been browsing through the questions on StackOverflow until my eyes are bleeding, but all of the solutions to similar problems are things that I've already done (base=, redirect etc)
Anyone else has this problem and solved it ? Would be much appreciated if you could share your findings.
Thanks
You shouldn't redirect in server like that
app.get('*', function(req, res) { res.redirect('/'); });
Instead, send same index.html
app.route('/*')
.get(function(req, res) {
res.sendFile(path.resolve(app.get('appPath') + '/index.html'));
});
Take a look at this generator for more
https://github.com/DaftMonk/generator-angular-fullstack/blob/master/app/templates/server/routes.js