How can I serve my app without using webpack-dev-server?

Question

I'm newbie in webpack, nodejs and angular, but I managed to make an app, it works fine in development environment, and I made a build with "webpack -p", the static files are generated (bundle.js and others), but my app doesnt load!, I'm trying to access it as normal but I get an error "GET http://localhost:8090/dashboard net::ERR_CONNECTION_REFUSED" like the web server is down (and of course is down because webpack-dev-server is not running!), I just dont get what should I do to make the app work without webpack-dev-server, I know it´s a missing concept I dont have. Please help!!!, pleeeease!!!, I'm stuck here for weeks!!.

kensplanet, I just checked the code and I didn't found it too different from my project (except for the good practices that you follow of course :) ), my webpack config seems fine, I copyed the index.html file and used my bundle.js and I still got the same error.

So you know my dev env: OS: Windows 7 SP1 NodeJS: v4.4.5 AngularJS: 1.5.7 Webpack: 1.13.1 ExpressJS: 4.14.0 (The database is in MySQL), I'm using a UI components library to facilitate the front end (angular-ui.github.io/bootstrap/).

This is the error that I get:

dateparser.js:1 Uncaught TypeError: e.module is not a function
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:26:11086)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:26:18044)
    at t (http://localhost:8080/muestras/public/bundle.js:1:107)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:26:18100)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:26:18198)
    at t (http://localhost:8080/muestras/public/bundle.js:1:107)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:27:5019)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:27:5303)
    at t (http://localhost:8080/muestras/public/bundle.js:1:107)
    at Object.<anonymous> (http://localhost:8080/muestras/public/bundle.js:26:18254)

When I see the details in dateparser.js and I get a error sign in this line:

    angular.module('ui.bootstrap.dateparser', [])

.service('uibDateParser', ['$log', '$locale', 'dateFilter', .....

This is my webpack file for development:

    var webpack = require('webpack');
    var path = require('path');

    module.exports = {
        devtool: 'inline-source-map',
        entry: [
            'webpack-dev-server/client?http://127.0.0.1:8090/',
            'webpack/hot/only-dev-server',
            'bootstrap-loader',
            './src'
        ],
        output: {
        path: path.join(__dirname, 'public'),
            filename: 'bundle.js'
        },
        resolve: {
            modulesDirectories: ['node_modules', 'src'],
            extension: ['', '.js']
        },
        module: {
            loaders: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel',
                    query: {
                        presets: ['es2015']
                    }
                },
                {
                    test: /\.html$/,
                    loader: 'raw'
                },
                {
                    test: /\.scss$/,
                    loaders: [
                        'style',
                        'css',
                        'autoprefixer?browsers=last 3 versions',
                        'sass?outputStyle=expanded'
                    ]
                },
                {
                    test: /\.(woff2?|ttf|eot|svg)$/,
                    loader: 'url?limit=10000'
                },
                {
                    test: /bootstrap-sass\/assets\/javascripts\//,
                    loader: 'imports?jQuery=jquery'
                },
                {
                    test: /\.css$/,
                    loader: "style-loader!css-loader"
                }
            ]
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin(),
            new webpack.ProvidePlugin({
                jQuery: "jquery"
            })
        ],
        devServer: {
            hot: true,
            proxy: {
                '*': 'http://localhost:3000'
            }
        }
    };

See the **dev** inside webpack-**dev**-server. It's a **dev**elopment server, not intended to be used in a production environment. Change to something else like nginx, apache, tomcat, or whatever — baao, Nov 26 '16 at 00:35
baao, thank you very much for your comment. I know that webpack-dev-server it's only for the development environment, I installed nginx to use it as a production server, but I don't know which files to serve, I tryed with a simple index.html and adding bundle.js in it with a — Federico Peñaranda, Nov 27 '16 at 22:19

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

You definitely require a server to run your application. If not webpack-dev-server, then some other HTTP server like http-server (https://www.npmjs.com/package/http-server) in NodeJS.

Go to the folder where your index.html is located and just run http-server from there.

Without a server, it wouldn't be possible to run your application, as this would result in AJAX Cross-domain issues later.

However, in Chrome there is a way to solve this problem using the --disable-web-security flag.

Check this, Disable same origin policy in Chrome

edited May 23 '17 at 12:01

Community

1
1

answered Nov 26 '16 at 00:32

kensplanet

472
7
14

Thank you very much for your answer, I installed nginx to use it as a production server, but I don't know which files to serve, I tryed with a simple index.html and adding bundle.js in it with a – Federico Peñaranda Nov 28 '16 at 12:23
Your approach is right. The index.html should be the entry point with bundle.js in the script tag. I have done something similar and it works. Check it here - http://www.kensplanet.com/dev-dictionary/ – kensplanet Nov 29 '16 at 22:55
Can I suggest you to browse through the code for the above site here - https://github.com/kensplanet/dev-dictionary Maybe you can figure out the missing pieces. Also, can you share parts of your code. It's a bit difficult to figure out what's wrong without it. – kensplanet Nov 29 '16 at 22:58
I edited my question to include your suggestions. Thank you!!. – Federico Peñaranda Dec 02 '16 at 21:39

How can I serve my app without using webpack-dev-server?

1 Answers1