Saturday 22 April 2017

[Help] Can't make webpack-dev-server to work ?

Hello,I just start node a week ago and I wanted to make a small project (Angular/node) so I made a DockerFile :FROM node:boron # Create app directory RUN mkdir -p /usr/project WORKDIR /usr/project EXPOSE 3000 CMD ["npm", "start"] And a docker-compose (I also got a postgresql)version: '2.1' services: node: build: ./docker/node volumes: - ./server:/usr/project ports: - 3000:3000 links: - database tty: true Here my node architecture:-config //for futur webpack configs -node_modules -public (output folder If I understand correctly) |---javascript -src |---app |---|---app.component.js |---|---app.module.ts |---|---main.ts |---resources |---views |---|---index.pug -package.json -server.js -tsconfig.json -webpack.config.json Here the package.json:{ "name": "node_angular", "version": "1.0.0", "description": "Node.js and Angular on Docker", "author": "-----------", "main": "server.js", "scripts": { "start": "npm install && webpack-dev-server --public --progress --profile --watch --port 3000 --content-base src/" }, "dependencies": { "express": "^4.13.3", "pug": "^2.0.0-beta.12", "@angular/core": "^4.0.2", "@angular/common": "^4.0.2", "@angular/compiler": "^4.0.2", "@angular/compiler-cli": "^4.0.2", "@angular/platform-browser": "^4.0.2", "@angular/http": "^4.0.2", "@angular/platform-browser-dynamic": "^4.0.2", "@angular/router": "^4.0.2", "@angular/forms": "^4.0.2", "@angular/platform-server": "^4.0.2", "@angular/animations": "^4.0.2", "webpack": "^2.4.1", "webpack-dev-middleware": "^1.10.1", "webpack-dev-server": "^2.4.2", "bootstrap": "^3.3.7", "typescript": "^2.2.2", "zone.js": "^0.8.5", "rxjs": "^5.3.0", "ts-loader": "^2.0.3", "webpack-node-externals": "^1.5.4", "awesome-typescript-loader": "^3.1.2", "html-webpack-plugin": "^2.28.0", "html-webpack-pug-plugin": "^0.0.3" } } Here the tsconfig.json:{ "compilerOptions": { "module": "commonjs", "moduleResolution": "node", "target": "es5", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "lib": [ "es2015", "dom" ], "noImplicitAny": true, "suppressImplicitAnyIndexErrors": true, "types": [ "node" ] }, "exclude": [ "node_modules" ] } Here the webpack.config.json:const nodeExternals = require('webpack-node-externals'); const webpack = require('webpack'); const path = require('path'); // Webpack Plugins var HtmlWebpackPugPlugin = require('html-webpack-pug-plugin'); module.exports = { target: 'node', externals: [nodeExternals()], entry: './src/app/main.ts', output: { path: path.join(__dirname, '/public/javascript/'), publicPath: '/public/javascript/', filename: 'bundle.js' }, module: { rules: [ { test: /\.ts$/, loader: 'awesome-typescript-loader', exclude: [/node_modules/] } ] }, resolve: { extensions: [".ts", ".js"] }, plugins: [ new webpack.optimize.UglifyJsPlugin() ] }; Here the server.js:'use strict'; //using express const express = require('express'); const path = require('path'); // Constants const PORT = 3000; // App const app = express(); app.use(express.static(path.join(__dirname,'public'))); app.use(express.static(path.join(__dirname,'src'))); app.set(path.join(__dirname, 'views')); app.set('view engine', 'pug'); app.get('/', function (req, res) { res.render('src/views/index'); }); app.get('/test', function (req, res) { res.send('Hello world!'); }); app.listen(PORT); console.log('Running on http://localhost:' + PORT); What I don't get is :node_1 | Project is running at http://localhost:3000/ node_1 | webpack output is served from /public/javascript/ node_1 | Content not from webpack is served from /usr/project/src ............ webpack: Compiled successfully. It seems that my server is running but when I tried to access the serverhttp://localhost:3000/Nothing shows, can you explain what I didn't get right ?

Submitted April 22, 2017 at 09:40PM by frennetixsc

No comments:

Post a Comment