Vfrdtyky

I am making a full stack application, with Express(written in Typescript) and React. I am using webpack to bundle both backend and frontend.

I have two separate configs for webpack. One for frontend and the other one for backend.

Frontend config (webpack-fe.config.js)

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpack = require('clean-webpack-plugin');



const FRONTENDSRC = path.resolve(__dirname, 'frontend/src');



module.exports = {

  target: 'web',

  // @babel/polyfill is needed to use modern js functionalities in old browsers.

  entry: ['@babel/polyfill', path.resolve(FRONTENDSRC, 'index.js')],

  output: {

    path: path.resolve(__dirname, 'dist'),

    filename: 'bundle-fe.js'

  },

  module: {

    rules: [

      {

        test: /.jsx$|.js$/,

        use: {

          loader: 'babel-loader',

          options: {

            // To process async functions.

            plugins: ['@babel/plugin-transform-async-to-generator']

          }

        },

        exclude: /(node_modules|bower_components)/

      },

      {

        test: /.scss$|.sass/,

        loaders: ['style-loader', 'css-loader', 'sass-loader']

      }

    ]

  },

  resolve: {

    modules: ['node_modules', FRONTENDSRC],

    extensions: ['.js', '.jsx', '.ts', '.tsx', '.css', '.scss']

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: path.resolve(FRONTENDSRC, 'index.html')

    }),

    new CleanWebpack(['./dist/bundle-be.js', './dist/index.html'])

  ],

  watch: true,

  mode: 'development',

  devServer: {

    contentBase: path.resolve(__dirname, 'dist'),

    compress: true,

    port: 9000

  }

};

Backend config (webpack-be.config.js)

const path = require('path');

const CleanWebpack = require('clean-webpack-plugin');

const nodeExternals = require('webpack-node-externals');



const projectDir = 'string value used to define path';



module.exports = {

  context: projectDir,

  target: 'node',

  // @babel/polyfill is needed to use modern js functionalities in old browsers.

  entry: [

    '@babel/polyfill',

    path.join(projectDir, 'backend', 'src', 'index.ts')

  ],

  output: {

    path: path.join(projectDir, 'dist'),

    filename: 'bundle-be.js',

    publicPath: path.join(projectDir, 'dist')

  },

  module: {

    rules: [

      {

        test: /.js$/,

        use: {

          loader: 'babel-loader',

          options: {

            // To process async functions.

            plugins: ['@babel/plugin-transform-async-to-generator']

          }

        },

        exclude: /(node_modules|bower_components)/

      },

      {

        test: /.ts$/,

        loaders: ['ts-loader'],

        exclude: /(node_modules|bower_components)/

      }

    ]

  },

  resolve: {

    modules: ['node_modules', path.join(projectDir, 'backend', 'src')],

    extensions: ['.js', 'web.js', 'webpack.js', '.ts', '.tsx']

  },

  plugins: [new CleanWebpack([path.join(projectDir, 'dist', 'bundle-be.js')])],

  watch: true,

  externals: [nodeExternals()],

  mode: 'development',

  devtool: 'inline-source-map'

};

webpack.config.js

const feConfig = require('./webpack-fe.config');

const beConfig = require('./webpack-be.config');



module.exports = [feConfig, beConfig];

Here is the code for Server Initialization (index.ts)

import http from 'http';

import debug from 'debug';

import webpack from 'webpack';

import webpackDevMiddleware from 'webpack-dev-middleware';



import App from './server';



const config = require('../../webpack-be.config.js');

const compiler = webpack(config);

debug('ts-express:server');



class InitServer {

  private port: number | boolean | string;

  private server: any;



  constructor() {

    this.port = this.normalizePort(process.env.port || 7000);

    App.set('port', this.port);

    App.use(

      webpackDevMiddleware(compiler, {

        publicPath: config.output.publicPath

      })

    );

    this.server = http.createServer(App);

    this.server.listen(this.port);

    this.server.on('error', this.onError);

    this.server.on('listening', this.onListening);

  }



  private normalizePort = (val: number | string): number | string | boolean => {

    let port: number = typeof val === 'string' ? parseInt(val, 10) : val;

    if (isNaN(port)) return val;

    else if (port >= 0) return port;

    else return false;

  };



  private onError = (error: NodeJS.ErrnoException): void => {

    if (error.syscall !== 'listen') throw error;

    let bind =

      typeof this.port === 'string' ? 'Pipe ' + this.port : 'Port ' + this.port;

    switch (error.code) {

      case 'EACCES':

        console.error(`${bind} requires elevated privileges`);

        process.exit(1);

        break;

      case 'EADDRINUSE':

        console.error(`${bind} is already in use`);

        process.exit(1);

        break;

      default:

        throw error;

    }

  };



  private onListening = (): void => {

    console.log(`listening on ${this.port}`);

    let addr = this.server.address();

    let bind = typeof addr === 'string' ? `pipe ${addr}` : `port ${addr.port}`;

    debug(`Listening on ${bind}`);

  };

}



new InitServer();

Here is the server config file(server.ts)

import express from 'express';

import bodyParser from 'body-parser';

import path from 'path';

import { projectDir } from './shared/constants';



class App {

  public express: express.Application;



  constructor() {

    this.express = express();

    this.middleware();

    this.routes();

  }

  private middleware(): void {

    this.express.use(function(req, res, next) {

      res.header('Access-Control-Allow-Origin', '*');

      res.header('Access-Control-Allow-Headers', '*');

      next();

    });

    this.express.use(bodyParser.json());

    this.express.use(bodyParser.urlencoded({ extended: false }));

  }

  private routes(): void {

    this.express.get('/', function(req, res) {

      res.sendFile(path.join(projectDir, 'dist', 'index.html'));

    });

  }

}

export default new App().express;

I use the following commands in the npm scripts:

"bundle": "webpack",

"serve": "node dist/bundle-be.js"

When I start the server, it serves my index.html file from the dist folder, but it gives me a 404 error for bundle-fe.js. I have checked that bundle-fe.js is generated in the dist folder. So why does it give me a 404 for bundle-fe.js ?

Thanks in advance!

Found it, I had to change the config file that I was using in index.ts file.

const config = require('../../webpack-fe.config.js'); // instead of webpack-be.config.js

Lol ^^ !!