CODEWITHSUNDEEP
angularjsnode.jsapachehttp-redirectangular-ui-router
NVO
NVO

Reputation: 2713

Angular ui-routing with domain aliases

We use Angular-UI-Router to navigate to our website. That is working fine. But we want to use domain aliases which point to a specific page of the website, with the url of the alias in the addressbar.

Example: We have the website: domain.com with some shop pages. domain.com/shop/shop-name, shop/shop-2, shop/store-name, etc. We want to have multiple domainnames with a alias to the /shop/[shop-slug] pages.

The site itselfs runs with NodeJS, but somebody created a setup with apache and NodeJS, so we can create aliasses in Apache, which redirects to the specified page. This is an example for a redirect:

VirtualHost file

<VirtualHost *:80>
  ServerName domainalias.com
  RewriteEngine on
  RewriteRule ^ https://domainalias.com/ [R]
</VirtualHost>

<VirtualHost *:443>
  ServerName domainalias.com
  RewriteEngine on
  RewriteRule ^/$ http://127.0.0.1:3000/shop/demo1 [P]
  RewriteRule ^/(.+) http://127.0.0.1:3000/$1 [P]
  Include /etc/letsencrypt/options-ssl-apache.conf
  SSLCertificateFile [certfile]
  SSLCertificateKeyFile [certfile]
  SSLCertificateChainFile [certfile]
</VirtualHost>

That works fine, but, the url is showing in the address bar like: domainalias.com/shop/demo1/

We think that the UI-router is doing a redirect with a new URL. Currently our routings file is:

Ui-Router

app.config(['$locationProvider', '$sceProvider', '$stateProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider',
function($locationProvider, $sceProvider, $stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {

    // disabled due some other problems with the redirects to the shop pages
    // but can't refresh a page now > other problem
    // $urlMatcherFactoryProvider.strictMode(false);

    // $urlRouterProvider.rule(function($injector, $location) {
    //  var path = $location.path();
    //  var hasTrailingSlash = path[path.length-1] === '/';

    //  if(hasTrailingSlash) {
    //      //if last charcter is a slash, return the same url without the slash  
    //      var newPath = path.substr(0, path.length - 1); 
    //      return newPath;
    //  }
    // });

    $urlRouterProvider
        // Show homepage by default on the shop/pro-shop.
        .when('/shop/:nameSlug/', '/shop/:nameSlug/home')

        // Redirect invalid routes to homepage.
        .otherwise('/home');

    $stateProvider

        .state('shop', {
            abstract: true,
            url: '/shop/:nameSlug',
            templateUrl: '/views/shop/index.html',
            controller: 'shopController',

        })

            .state('shop.home', {
                url: '/home',
                templateUrl: '/views/shop/home.html'
            })

            .state('shop.product', {
                url: '/products/:productNameSlug',
                templateUrl: '/views/product.html',
                controller: 'productController'
            })

            .state('shop.products', {
                url: '/products',
                templateUrl: '/views/products.html'
            })

            .state('shop.brand', {
                url: '/brands/:brandNameSlug',
                templateUrl: '/views/brand.html',
                controller: 'brandController'
            })

            .state('shop.brands', {
                url: '/brands',
                templateUrl: '/views/brands.html'
            })

            .state('shop.campaigns', {
                url: '/campaigns',
                templateUrl: '/views/campaigns.html'
            })

            .state('shop.campaign', {
                url: '/campaigns/:campaignNameSlug',
                templateUrl: '/views/campaign.html',
                controller: 'campaignController'
            })

            .state('shop.contact', {
                url: '/contact',
                templateUrl: '/views/shop/contact.html'
            })

            .state('shop.custom-page', {
                url: '/:customPageNameSlug',
                templateUrl: '/views/shop/custom-page.html'
            })

            .state('shop.cart', {
                url: '/cart',
                templateUrl: '/views/cart.html',
                controller: 'checkoutController'
            })

        .state('layout', {
            abstract: true,
            templateUrl: '/views/layout.html',
            controller: 'homeController'
        })

            .state('layout.home', {
                url: '/home',
                templateUrl: '/views/home.html',
                controller: 'homeController'
            })

            .state('layout.product', {
                url: '/products/:nameSlug',
                templateUrl: '/views/product.html',
                controller: 'productController'
            })

            .state('layout.products', {
                url: '/products',
                templateUrl: '/views/products.html',
                controller: 'productsController',
                data: {
                    pageTitle: 'Producten'
                }
            })

            .state('layout.brand', {
                url: '/brands/:nameSlug',
                templateUrl: '/views/brand.html',
                controller: 'brandController'
            })

            .state('layout.brands', {
                url: '/brands',
                templateUrl: '/views/brands.html',
                controller: 'brandsController'
            })

    $locationProvider.html5Mode({enabled: true, requireBase: false});
    $sceProvider.enabled(false);
}
]);

As you can see, we comment out some lines above the routings to make the redirects possible, with this code on, alle the pages of a alias are redirected to /home.

Question:

Is it possible to make a shop page available under a domain alias? So we get URL's like domainalias.com/home and domainalias.com/products and not domainalias.com/shop/demo1/home and domainalias.com/shop/demo1/products and is it possible to fix the refresh page? With the code commented out, every refresh is doing a redirect to /home also.

EDIT With a curl to domainalias.com we see a 301 redirect to /shop/demo1

HTTP/1.1 301 Moved Permanently
Date: Thu, 02 Feb 2017 11:02:01 GMT
Server: Apache/2.4.7 (Ubuntu)
X-Powered-By: Express
Content-Type: text/html; charset=UTF-8
Content-Length: 55
X-Content-Type-Options: nosniff
Location: /shop/demo1/
Vary: Accept-Encoding

But, we can't find this redirect. We haven't created it, and since it is 'Powered-By: Express' it must be on the NodeJS server

Upvotes: 0

Views: 876

Answers (1)

NVO
NVO

Reputation: 2713

We have solved this by trial and error and the 'documentation' of Angular-UI-Router.

We created two 'parent' states: shop and proshop. To avoid duplicate code we created a variabele with 'shop' or 'proshop' depending on the domain name. 

var shop = "shop";
var getShopType = function(){
    if (window.location.hostname != 'domain.com' && window.location.hostname != "127.0.0.1") {
                shop = "proshop";
            }
        return shop;
}
getShopType();

States:

.state("shop", {
        abstract: true,
        url: '/shop/:nameSlug',
        templateUrl: '/views/shop/index.html',
        controller: 'shopController',
        params: {
            nameSlug: null
        }
    })

    .state("proshop", {
        abstract: true,
        templateUrl: '/views/shop/index.html',
        controller: 'shopController',
        params: {
            nameSlug: null
        }
    })


        .state(shop +'.home', {
            url: '/home',
            templateUrl: '/views/shop/home.html',
        })

        .state(shop + '.product', {
            url: '/products/:productNameSlug',
            templateUrl: '/views/product.html',
            controller: 'productController'
        })

The other domainnames will now be pointing to another new state 'extern', which redirect all routes to 'proshop'.

.state('extern', {
                url: '/extern/:nameSlug/:page',
                controller: ['$stateParams', '$state', function($stateParams, $state){
                    $state.go('proshop.' + $stateParams.page , {nameSlug: $stateParams.nameSlug});
                }],
            })

For the links on the page, we created a function in the rootscope of angular which it the same function as the getShopType() function above. So we have dynamically links to states, without having the states twice.

a(ui-sref="{{getShopType()}}.home({nameSlug})" ui-sref-active="active") Home

Upvotes: 1

Related Questions