CODEWITHSUNDEEP
webpackwebpack-dev-server
user3706408
user3706408

Reputation: 41

webpack-dev-server with backend configuration

I am using webpack-dev-server for an angularjs app on localhost:8081 Also i use tomcat server on port 8080. I have next structure

project/
project/src/main/sources/
project/src/main/sources/css
project/src/main/sources/js
project/src/main/sources/img
project/src/main/sources/styles
project/src/main/sources/views
project/src/main/sources/index.html
project/src/main/sources/js

webapp/
webapp/build/
webapp/build/js/bundle.js
webapp/build/js/bundle.js.map
webapp/build/js/jquery.min.js

I have next index.html:

....

<link rel="stylesheet" href="/css/styles.css" type="text/css"/>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bundle.js"></script>

....

I have next webpack condig

var webpack = require("webpack");

module.exports = {
    context: __dirname + "\\src\\main\\sources",
    entry: ["./index.js",
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8081'],
    output: {
        path: __dirname + "\\src\\main\\webapp\\build\\js\\",
        filename: "bundle.js",
        publicPath: "\\js\\"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: 'style!css'
            },
            {test: /\.js$/, loader: "babel", query: { presets: ['es2015'] }},
            {test: /\.html$/, loader: "raw"}
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: __dirname + "\\src\\main\\sources",
        publicPath: '/js/',
        port: 8081,
        historyApiFallback: true,
        proxy: {
            '/somePath' : 'http://localhost:8080/'
        }
    }
};

So when i open http://localhost:8081/webpack-dev-server/js/bundle I see "HOT" bundle. With this configuration: css styles, img doesn't obtained from localhost:8081, but it related with webpack, and i need to recompile this too. How to change config?

Also i have a lot of different request to server side like:

"localhost:8081/someRequest1/some", 
"localhost:8081/someRequest2/some", 
......
"localhost:8081/someRequest1/some"

I can't write each request in proxy settings, with witch settings in configuratuin it will work? I tried 

proxy: {
            '*' : 'http://localhost:8080/',
            '/js/*': '/'
        }

With this config js/bundle not found. Also i tried 

proxy: {
            '*' : 'http://localhost:8080/',
            '/js/*': '/'
        }

and 

proxy: {
            '*' : 'http://localhost:8080/',
            '/js/*': 'http://localhost:8081/'
        }

js/bundle not working too.

UPDATE 1. Probably I need proxy all requests except /js/. How can I do this?

Upvotes: 1

Views: 1571

Answers (1)

Frederick Mfinanga
Frederick Mfinanga

Reputation: 1155

All you need is a pattern, ie:

proxy: {
        '/api/v1/*' : 'http://localhost:8080/',
    }

or simply

proxy: {
        '/api/*' : 'http://localhost:8080/',
    }

This requires you to update your api to follow this behaviour.

Upvotes: 0

Related Questions