generate static urls automatically in MEANjs project - angularjs

I am working on a MEANjs project. Till now, the project consisted of dynamic urls, wherein the city and country name will get attached to the url and filters will attach as parameters, dynamically. But now, for SEO purpose, I need static urls with filters and city/country name.
Currently I have urls like this: www.abc.com/xyz/san-jose--ca--usa?params=123
I need to have static urls for the same as: www.abc.com/123-xyz-in-san-jose--ca--usa
So here are the problems I am facing:
1. I am not sure whether this has to done in backend(nodejs) or frontend(angularjs).
2. Whether I need to generate and store all such 1000s of url somewhere in my project.
3. if point 2 is true, do I need a list of all cities and countries to generate such urls? If so, how will I get those.
I tried to google, but I could only find something in php which is .htaccess and I am not even sure if its the same thing that I am searching.
Can somebody help me out or guide me to any documentation explaining the same?
Edit:
Since I need to use google maps geocode to get lat-lon for the city-state combo. For point 1, I am going the angularjs way. I can specify the routes similar to the way suggested by Molda in angularjs.
For point 2, I figured I will have to generate the static links for all city-state combinations and store it in some file. But I am not sure how to get all the city-state combination for USA.
As of now, I am going with census data. But again, not sure if google will geocode it correctly or not. If anybody can help me out in this, it will be awesome.

Related

Azure - Splitting up a react app using Azure CDN Endpoints

I have a create-react-app website, it has multiple pages using react router. I discovered recently I can host my site using Azure Storage Account rather than a web app which is pretty cool.
The main content of this website is a list of games which when clicked opens a list of characters per game. Each game has a path, my intention is to stick each of these game paths on a seperate custom domain to give the appearance that they are each their own site.
I am attempting to do this using azure cdn, and ive recently discovered that i can use Azure CDN to create endpoints and allocate them each a custom domain.
So I have a CDN Profile with Verizon Premium
I have a primary endpoint called [website-name]-cdn, it uses the base hostname with no origin path. Loads the base website as expected.
I have another endpoint called [website-name]-dota-2, it has the origin path for the game dota 2. Loads the base website instead of the page for dota 2, I need this to go straight to the dota 2 page.
Here is my url rewrite rule.
I want to be able to set up an endpoint for each individual game, but i just cant seem to configure things properly to get the urls to load correctly.
Everytime I change the rule I have to wait 4 hours so progress is slow.
Any help is much appreciated :)
Hopefully this is better layed out that my last attempt.
Figured this one out.
In short, the answer is that this cannot be easily accomplished the way I was going about it. However changing things wasn't as bad as I thought it would be.
The best way to accomplish this is to change the site to have multiple entry points, this cannot be accomplished out of the box with CRA so you need to use something like this. With my multi-entry point react site I change the react-router routes based on the entry point of the site.
Once this is done you can deploy the site to multiple storage containers, and then in each one specify a different entry point.

2sxc - Getting URL path from DNN link parameter / Tab ID

I am working on integrating a 2sxc content WebAPI feed into a ReactJS application.
I have managed to get a JSON feed of data into the application, and am in the process of mapping out the data.
I'm wondering what the best practice would be to "resolve" a URL which is coming through as a DNN Page/ Tab ID.
Below I will showcase the various points this is referenced...
First the Setup of the entity / data types...
Then this is an example entry with the data filled out... The page link / URL is set up to point to another internal page on the DNN website:
Finally you can see this data item come through as a JSON feed via the 2sxc API:
What is the best way to convert this piece of data into a URL which can be used in a SPA type application?
There isn't any "server-side" code going on, just reading a JSON feed on the client side...
My initial idea would be to parse this piece of data in JS, to extract the number then use something like this:
http://www.dotnetnuke.com/tabid/85/default.aspx
http://www.dotnetnuke.com/default.aspx?tabid=85
I was hoping someone with more experience would be able to suggest a better / cleaner approach.
Thanks in advance
If you were server-side in Razor you'd be doing something like this:
#using DotNetNuke.Common
View List
XXXX = Dnn.Tab.TabID or define a string with the tab id you want
I seem to have a vague memory that I saw somewhere that Daniel (2sxc) has a way to use Globals.NavigateUrl() or similar on the client side, but I have no idea where or if I did see that.
The Default.aspx?tabid=xx format will certainly work, as it's the oldest DNN convention and is still used in fallbacks. The urls aren't nice, but it's ok.
The reason you're seeing this is because the query doesn't perform the automatic lookup with the AsDynamic(...) does for you. There is an endpoint to look them up, but they are not official, so they could change and therefor I don't want to suggest that you use them.
So if you really want a nicer url, you should either see if DNN has a REST API for this, or you could create a small own 2sxc-api endpoint (in the api folder) just to look that up, then using the NavigateURL. Would be cool if you shared your work.

Adding Blog Content/Static files to existing Preact.js website

I currently have an existing Preact JS site set up but want to add blog section.
So basically easy way to add new pages and routes.
I.e. blog/content-1, blog/content-2
I know I could easily create these pages and routes manually but is there something better out there that fits into existing sites ?
I.e. a lot of the static site generators I see out there, basically you need to run from the start and they generate a new site.
But in my case I just wish to add an extra section to my site which will be the static blog entries, not sure what the best tools out there for this is ?
If any ideas or suggestions would be great.
The preactjs.com website is built exactly how you are wanting to build this. It's open source: https://github.com/developit/preact-www
Basically, fetch your HTML content via Ajax (however you'd like), then render.it as Virtual DOM using preact-markup.
For a real-world example, here's how preactjs.com does that:
https://github.com/developit/preact-www/blob/master/src/components/content-region.js

angularjs sitemap SEO

I don't see any updated answer on similar topics (hopefully something has changed with last crawl releases), that's why I come up with a specific question.
I have an AngularJS website, which lists products that can be added or removed (the links are clearly updated). URLs have the following format:
http://example.com/#/product/564b9fd3010000bf091e0bf7/published
http://example.com/#/product/6937219vfeg9920gd903bg03/published
The product's ID (6937219vfeg9920gd903bg03) is retrieved by our back-end.
My problem is that Google doesn't list them, probably because I don't have a sitemap.xml file in my server..
In a day a page can be added (therefore a new url to add) or removed..
How can I manage this?
Do I have to manually (or by batch) edit the file each time?
Is there a smart way to tell Google: "Hey my friend, look at this page"?!
Generally you can create a JavaScript - AngularJS sitemap, and according to this guidance from google :
https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html
They Will crawl it.
you can also use Fetch as Google To validate that the pages rendered correctly
.
There is another study about google execution of JavaScript,
http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

AngularJS, Deeplinking within a view

Objective
I am currently building my first web application with AngularJS. I need to know the correct way to deeplink to content within a view.
http://signalreview.2mellow.com/ this is the current build.
Description of problem
For example, You can search for mcdonalds, spokane, When this happens I want the address bar to reflect the search that was just done such as #/search/mcdonalds%20spokane so that a user can link a search to someone else. I understand how I can get the data out and initiate the search. I just don't understand how I should be utilizing Angular JS to accomplish the goal.
From my research I have determined that nested views is not a good idea.
Also I have plans to have it so that if you click a map marker for a place that has been reviewed (stored locally in the db) It would put the id in the address bar so that location could then be linked to someone else or you could bookmark it.
Contstraints
The idea is that everything is done on one view with a persistent google map however there are certain states that are saved within that view.
Conclusion
Am I approaching this the wrong way?

Resources