Friday 2 October 2020

How to set multiregional subdirectories in angular 8 + expressjs

We struggle to understand how to set in angular8 a multiregional subdirectory. We cannot find a specific example to follow, basically, we targeting as a subfolder, GB, US, CA, AU, NZ, IE. Is the same site for all and only English. Means will be the same route and content for all those subdirectories.

mysite.com/country/page-1

On which area we should set the country and subdirectory and also the big thing how this will work with express and angular Universal as SSR.

Our site is hosted on Azure + IIS

I'll appreciate all your help. Thx

Server.ts

                import 'zone.js/dist/zone-node';

                import * as express from 'express';
                import {join} from 'path';

                import { environment } from './src/environments/environment';

                // Express server
                const app = express();

                const PORT = process.env.PORT || 8080;
                const DIST_FOLDER = join(process.cwd(), 'dist');
                console.log('processPath',process.cwd());

                // * NOTE :: leave this as require() since this file is built Dynamically from webpack
                const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap, RESPONSE, REQUEST} = require('./dist/server/main');


                app.set('view engine', 'html');
                app.set('views', join(DIST_FOLDER, 'project'));

                // Start up the Node server
                app.listen(PORT, () => {
                console.log(`Node Express server listening on http://localhost:${PORT}`);
                });

                app.set('case sensitive routing', true);

                import lowercasePaths from 'express-lowercase-paths';
                app.use(lowercasePaths());

                // https://github.com/expressjs/express/issues/2727
                app.use(function(req,res,next){
                req.connection.setNoDelay(true);
                next();
                });


                // /* https://expressjs.com/en/resources/middleware.html */
                const bodyParser = require('body-parser');
                app.use(bodyParser.json({ type: 'application/*+json' }));
                app.use(bodyParser.text({ type: 'text/html' }));
                app.use(express.json());


                /* https://expressjs.com/en/resources/middleware/serve-static.html */
                app.use(express.static(join(DIST_FOLDER, 'project'), { maxAge: '4 days', redirect: false }));

                app.use(function (req, res, next) { next(); });

                // Server static files from /project
                // TODO: check if this is needed, the maxAge value is not being applied, it is using line 122 above
                app.get('*.*', express.static(join(DIST_FOLDER, 'project'), {
                maxAge: '4 days',
                redirect: false
                }));

                // TODO: implement data requests securely
                app.get('/api/*', (req, res) => {
                res.status(404).send('data requests are not supported');
                });

                // Example Express Rest API endpoints
                // app.get('/api/**', (req, res) => { });

                // All regular routes use the Universal engine
                app.get('*', (req, res) => {
                res.render('index', { req });
                });

                /*
                How to make an Angular app witch Universal SSR use dynamic configurations from json file?
                https://stackoverflow.com/questions/55704526/how-to-make-an-angular-app-witch-universal-ssr-use-dynamic-configurations-from-j
                */
                app.engine('html', (_, options, callback) => {
                const protocol = options.req.protocol;
                const host = options.req.get('host');

                const engine = ngExpressEngine({
                    bootstrap: AppServerModuleNgFactory,
                    providers: [
                    provideModuleMap(LAZY_MODULE_MAP),
                    { provide: 'BASE_URL', useFactory: () => `https://${host}`, deps: [] },
                    { provide: 'REQ_HEADERS', useFactory: () => JSON.stringify(options.req.headers), deps: []},
                    {
                        provide: REQUEST,
                        useValue: options.req,
                        /* https://stackoverflow.com/questions/52668630/angular-6-server-side-rendering-ssr-set-status-code-from-component */
                    },
                    {
                        provide: RESPONSE,
                        useValue: options.req.res,
                    },
                    ]
                });
                engine(_, options, callback);
                });


from How to set multiregional subdirectories in angular 8 + expressjs

No comments:

Post a Comment