search

GeoNode / geonode-mapstore-client

MapStore Client for GeoNode
http://geonode.org/geonode-mapstore-client/master
Other
15 stars 107 forks source link

webpack dev server now with https for localhost? #53

Open t-book opened 4 years ago

t-book commented 4 years ago

@allyoucanmap can you kindly give some guidance as it looks dev setup has changed a bit?

The readme now say one shoud create an env file:

https://github.com/GeoNode/geonode-mapstore-client/tree/master/geonode_mapstore_client/client

The application runs at https://localhost:8081 afterwards.

Can you tell what is the logic forcing https for localhost and should I create a self signed cert? Further, I do wonder as geonode templates still use http

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 ?!

thanks,

toni

allyoucanmap commented 4 years ago

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 commented 4 years ago

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

t-book commented 4 years ago

@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:

Bildschirmfoto 2020-03-30 um 12 42 00

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

allyoucanmap commented 4 years ago

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 commented 4 years ago

@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:

Bildschirmfoto 2020-03-30 um 13 39 54

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 commented 4 years ago

@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 commented 4 years ago

thanks @afabiani I will give it a try!