node.js - Express app: webpack bundle.js is not served -
i new building apps express , working on creating application node-express-angular4 , postgres. using webpack build application , deploying heroku. below app.jsfile
app.js
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieparser = require('cookie-parser'); var bodyparser = require('body-parser'); var approutes = require('./routes/app'); var eventroutes = require('./routes/events'); var userroutes = require('./routes/user'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'hbs'); app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyparser.json()); app.use(bodyparser.urlencoded({extended: false})); app.use(cookieparser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/material_css',express.static(path.join(__dirname, '/node_modules/@angular/material/prebuilt-themes/'))); app.use('/ng2-toastr',express.static(path.join(__dirname, '/node_modules/ng2-toastr/bundles/'))); // app.use(express.static(path.join(__dirname, 'stylesheets'))); //sequelize checking connection var models = require('./models/'); models.sequelize .authenticate() .then(function () { console.log('connection successful'); }) .catch(function(error) { console.log("error creating connection:", error); }); app.use(function (req, res, next) { res.setheader('access-control-allow-origin', '*'); res.setheader('access-control-allow-headers', 'origin, x-requested-with, content-type, accept'); res.setheader('access-control-allow-methods', 'post, get, patch, delete, options'); next(); }); app.use('/event', eventroutes); app.use('/user', userroutes); app.use('/', approutes); // catch 404 , forward error handler app.use(function (req, res, next) { return res.render('index'); }); module.exports = app; index.hbs
<!doctype html> <html> <head> <title>my app</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- latest compiled , minified bootstrap css --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/icon?family=material+icons" rel="stylesheet"> <link rel='stylesheet' type="text/css" href='/stylesheets/style.css'> </head> <body> <my-app>loading...</my-app> <script type="text/javascript" src="/js/app/bundle.js"></script> <script type="text/javascript" src="https://use.fontawesome.com/5fe6a32bd8.js"></script> </body> </html> webpack.config.prod.js
var path = require('path'); var webpack = require('webpack'); var webpackmerge = require('webpack-merge'); var commonconfig = require('./webpack.config.common.js'); module.exports = webpackmerge.smart(commonconfig, { entry: { 'app': './assets/app/main.aot.ts' }, output: { path: path.resolve(__dirname + '/public/js/app'), filename: 'bundle.js', publicpath: '/js/app/', chunkfilename: '[id].[hash].chunk.js' }, module: { rules: [ { test: /\.ts$/, use: [ 'awesome-typescript-loader', 'angular2-template-loader', 'angular-router-loader?aot=true' ] } ] }, plugins: [ new webpack.optimize.uglifyjsplugin({ sourcemap: false }) ] }); and package.json scripts section
"scripts": { "start": "node ./bin/www", "build": "del-cli public/js/app && webpack --config webpack.config.dev.js --progress --profile --watch", "build:prod": "del-cli public/js/app && ngc -p tsconfig.aot.json && ngc -p tsconfig.aot.json && webpack --config webpack.config.prod.js --progress --profile --bail && del-cli 'public/js/app/**/*.js' 'public/js/app/**/*.js.map' '!public/js/app/bundle.js' '!public/js/app/*.chunk.js' 'assets/app/**/*.ngfactory.ts' 'assets/app/**/*.shim.ts' 'assets/app/**/*.ngsummary.json' 'assets/app/**/*.ngstyle.ts'" }, when deploy heroku build process successful, error
uncaught syntaxerror: unexpected token < as bundle.js not served (404) , index.html served due setting in app.js handle 404 errors. tried adjusting publicpath in webpack config did not work. doing wrong here. appreciated.
Comments
Post a Comment