webpack dev server now with https for localhost? about geonode-mapstore-client

[allyoucanmap]

Hi @t-book ,
we introduced this changes to be able to work on localhost:8081 with a remote instance of GeoNode without forcing the setup of a local GeoNode dev environment.
We improved the dev server proxy in the new webpack to be able to map all paths of the targeted remote GeoNode instance under localhost:8081.

here an example of configuration:

env.json: not committed configuration file

{
    "DEV_SERVER_HOST":  "example-geonode-host.org"
}

location of env.json

├── geonode-mapstore-client
│   ├── geonode-mapstore-client
│   │   ├── client
│   │   │   ├── env.json

after running npm start, paths of "example-geonode-host.org" are mapped under localhost:8081 using the dev bundle of MapStore client
eg:
https://example-geonode-host.org/layers/geonode:layer -> https://localhost:8081/layers/geonode:layer

The configuration described above was targeting an instance using https protocol but in your case using localhost:8000 the protocol will be http.

Could you please try to replace the webpack with this one?

const path = require('path');
const assign = require('object-assign');

const themeEntries = {
    'themes/default': path.join(__dirname, 'themes', 'default', 'theme.less'),
    'themes/preview': path.join(__dirname, 'themes', 'preview', 'theme.less')
};
const extractThemesPlugin = require('./MapStore2/build/themes.js').extractThemesPlugin;

const envJson = require('./env.json');

const DEV_SERVER_HOST = envJson.DEV_SERVER_HOST || 'ERROR:INSERT_DEV_SERVER_HOST_IN_ENV_JSON_CONFIG! eg: my-geonode-host.org';
const protocol = envJson.DEV_SERVER_HOST_PROTOCOL || 'http';

module.exports = assign({}, require('./MapStore2/build/buildConfig')(
    {
        'ms2-geonode-api': path.join(__dirname, 'js', 'api')
    },
    themeEntries,
    {
        base: __dirname,
        dist: path.join(__dirname, 'dist'),
        framework: path.join(__dirname, 'MapStore2', 'web', 'client'),
        code: [path.join(__dirname, 'js'), path.join(__dirname, 'MapStore2', 'web', 'client')]
    },
    extractThemesPlugin,
    false,
    '/static/mapstore/dist/',
    '.msgapi'
), {
    devServer: {
        https: protocol === 'https' ? true : false,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        contentBase: [
            path.join(__dirname),
            path.join(__dirname, '..', 'static')
        ],
        before: function(app) {
            const hashRegex = /\.[a-zA-Z0-9]{1,}\.js/;
            app.use(function(req, res, next) {
                // remove hash from requests to use the local js
                if (req.url.indexOf('/static/geonode/js/ms2/utils/') !== -1
                || req.url.indexOf('/ms2-geonode-api') !== -1) {
                    req.url = req.url.replace(hashRegex, '.js');
                    req.path = req.path.replace(hashRegex, '.js');
                    req.originalUrl = req.originalUrl.replace(hashRegex, '.js');
                }
                next();
            });
        },
        proxy: [
            {
                context: [
                    '**',
                    '!**/static/mapstore/**',
                    '!**/static/geonode/js/ms2/utils/**',
                    '!**/geonode/js/ms2/utils/**',
                    '!**/MapStore2/**',
                    '!**/node_modules/**'
                ],
                target: `${protocol}://${DEV_SERVER_HOST}`,
                headers: {
                    Host: DEV_SERVER_HOST,
                    Referer: `${protocol}://${DEV_SERVER_HOST}/`
                }
            },
            {
                context: [
                    '/static/mapstore/MapStore2/web/client/translations/**',
                    '/static/geonode/js/ms2/utils/**'
                ],
                target: `${protocol}://localhost:8081`,
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '/static/mapstore/MapStore2/web/client/translations/': '/MapStore2/web/client/translations/',
                    '/static/geonode/js/ms2/utils/': '/geonode/js/ms2/utils/'
                }
            }
        ]
    }
});

with this env.json file

{
    "DEV_SERVER_HOST": "localhost:8000"
}

The new configuration above should solve the issue with http and you should be able to work on GeoNode MapStore client on http://localhost:8081.

https://github.com/GeoNode/geonode-mapstore-client/blob/master/geonode_mapstore_client/templates/geonode-mapstore-client/base_ms.html#L23

Hence it cannot find the build anymore ?!

You are right the new correct path of the bundle is http://localhost:8081/static/mapstore/dist/ms2-geonode-api.js instead of http://localhost:8081/dist/ms2-geonode-api.js.

{%  if MAP_DEBUG %}
<script id="ms2-api" src="http://localhost:8081/static/mapstore/dist/ms2-geonode-api.js"></script>
{% else %}

please let me know if this solve the issue so I'll provide a fix,
Thanks!

[t-book]

great @allyoucanmap thanks a lot for your guidance. I will give it a try and report back.

[t-book]

@allyoucanmap Either I have overseen something or one piece is missing:

env.json

{
    "DEV_SERVER_HOST": "localhost:8000"
}

webpack config as shown above

templates reference:

{%  if MAP_DEBUG %}
<script id="ms2-api" src="http://localhost:8081/static/mapstore/dist/ms2-geonode-api.js"></script>
{% else %}
<script id="ms2-api" src="{% static 'mapstore/dist/ms2-geonode-api.js' %}"></script>
{% endif %}

Chunks cannot be found as port 8000 is used:

Can you say why the build is trying to load Chunks still over 8000?

[allyoucanmap]

Can you say why the build is trying to load Chunks still over 8000?

checked previous webpack and on this line was using a complete url as publicPath and force if to localhost:8081.
So the new webpack should be:

const path = require('path');
const assign = require('object-assign');

const themeEntries = {
    'themes/default': path.join(__dirname, 'themes', 'default', 'theme.less'),
    'themes/preview': path.join(__dirname, 'themes', 'preview', 'theme.less')
};
const extractThemesPlugin = require('./MapStore2/build/themes.js').extractThemesPlugin;

const envJson = require('./env.json');

const DEV_SERVER_HOST = envJson.DEV_SERVER_HOST || 'ERROR:INSERT_DEV_SERVER_HOST_IN_ENV_JSON_CONFIG! eg: my-geonode-host.org';
const protocol = envJson.DEV_SERVER_HOST_PROTOCOL || 'http';

module.exports = assign({}, require('./MapStore2/build/buildConfig')(
    {
        'ms2-geonode-api': path.join(__dirname, 'js', 'api')
    },
    themeEntries,
    {
        base: __dirname,
        dist: path.join(__dirname, 'dist'),
        framework: path.join(__dirname, 'MapStore2', 'web', 'client'),
        code: [path.join(__dirname, 'js'), path.join(__dirname, 'MapStore2', 'web', 'client')]
    },
    extractThemesPlugin,
    false,
    `${protocol}://localhost:8081/static/mapstore/dist/`,
    '.msgapi'
), {
    devServer: {
        https: protocol === 'https' ? true : false,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        contentBase: [
            path.join(__dirname),
            path.join(__dirname, '..', 'static')
        ],
        before: function(app) {
            const hashRegex = /\.[a-zA-Z0-9]{1,}\.js/;
            app.use(function(req, res, next) {
                // remove hash from requests to use the local js
                if (req.url.indexOf('/static/geonode/js/ms2/utils/') !== -1
                || req.url.indexOf('/ms2-geonode-api') !== -1) {
                    req.url = req.url.replace(hashRegex, '.js');
                    req.path = req.path.replace(hashRegex, '.js');
                    req.originalUrl = req.originalUrl.replace(hashRegex, '.js');
                }
                next();
            });
        },
        proxy: [
            {
                context: [
                    '**',
                    '!**/static/mapstore/**',
                    '!**/static/geonode/js/ms2/utils/**',
                    '!**/geonode/js/ms2/utils/**',
                    '!**/MapStore2/**',
                    '!**/node_modules/**'
                ],
                target: `${protocol}://${DEV_SERVER_HOST}`,
                headers: {
                    Host: DEV_SERVER_HOST,
                    Referer: `${protocol}://${DEV_SERVER_HOST}/`
                }
            },
            {
                context: [
                    '/static/mapstore/MapStore2/web/client/translations/**',
                    '/static/geonode/js/ms2/utils/**'
                ],
                target: `${protocol}://localhost:8081`,
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '/static/mapstore/MapStore2/web/client/translations/': '/MapStore2/web/client/translations/',
                    '/static/geonode/js/ms2/utils/': '/geonode/js/ms2/utils/'
                }
            }
        ]
    }
});

Question:
Are you using the application from localhost:8081 or localhost:8000?
I mean what happen if you open localhost:8081 in the browser?

thanks again

[t-book]

@allyoucanmap Using your just updated webpack config solves the 404 with chunks. However something else seems to be missing as the map stays white.

This is what I see in console:

Are you using the application from localhost:8081 or localhost:8000?
I mean what happen if you open localhost:8081 in the browser?

Django is served over 8000 using the common paver way of starting django dev server.
Mapstore is serving content from 8081 (webpack dev server)

[afabiani]

@t-book try the following ones

webpack.config.js

const path = require('path');
const assign = require('object-assign');

const themeEntries = {
    'themes/default': path.join(__dirname, 'themes', 'default', 'theme.less'),
    'themes/preview': path.join(__dirname, 'themes', 'preview', 'theme.less')
};
const extractThemesPlugin = require('./MapStore2/build/themes.js').extractThemesPlugin;

const envJson = require('./env.json');

const DEV_SERVER_HOST = envJson.DEV_SERVER_HOST || 'ERROR:INSERT_DEV_SERVER_HOST_IN_ENV_JSON_CONFIG! eg: my-geonode-host.org';
const protocol = envJson.DEV_SERVER_HOST_PROTOCOL || 'http';

module.exports = assign({}, require('./MapStore2/build/buildConfig')(
    {
        'ms2-geonode-api': path.join(__dirname, 'js', 'api')
    },
    themeEntries,
    {
        base: __dirname,
        dist: path.join(__dirname, 'dist'),
        framework: path.join(__dirname, 'MapStore2', 'web', 'client'),
        code: [path.join(__dirname, 'js'), path.join(__dirname, 'MapStore2', 'web', 'client')]
    },
    extractThemesPlugin,
    false,
    `/static/mapstore/dist/`,
    '.msgapi'
), {
    devServer: {
        https: protocol === 'https' ? true : false,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        contentBase: [
            path.join(__dirname),
            path.join(__dirname, '..', 'static')
        ],
        before: function (app) {
            const hashRegex = /\.[a-zA-Z0-9]{1,}\.js/;
            app.use(function (req, res, next) {
                // remove hash from requests to use the local js
                if (req.url.indexOf('/static/geonode/js/ms2/utils/') !== -1
                    || req.url.indexOf('/ms2-geonode-api') !== -1) {
                    req.url = req.url.replace(hashRegex, '.js');
                    req.path = req.path.replace(hashRegex, '.js');
                    req.originalUrl = req.originalUrl.replace(hashRegex, '.js');
                }
                next();
            });
        },
        proxy: [
            {
                context: [
                    '**',
                    '!**/static/mapstore/**',
                    '!**/static/geonode/js/ms2/utils/**',
                    '!**/geonode/js/ms2/utils/**',
                    '!**/MapStore2/**',
                    '!**/node_modules/**'
                ],
                target: `${protocol}://${DEV_SERVER_HOST}`,
                headers: {
                    Host: DEV_SERVER_HOST,
                    Referer: `${protocol}://${DEV_SERVER_HOST}/`
                }
            },
            {
                context: [
                    '/static/mapstore/MapStore2/web/client/**',
                    '/static/geonode/js/ms2/utils/**'
                ],
                target: `${protocol}://localhost:8081`,
                secure: false,
                changeOrigin: true,
                pathRewrite: {
                    '/static/mapstore/MapStore2/web/client/': '/MapStore2/web/client/translations/',
                    '/static/geonode/js/ms2/utils/': '/geonode/js/ms2/utils/'
                }
            }
        ]
    }
});

env.json

{
    "DEV_SERVER_HOST": "localhost:8000"
}

Moreover, update the file geonode_mapstore_client/templates/_config.html

...
proxy: "{{ PROXY_URL }}",
...

[t-book]

thanks @afabiani I will give it a try!