0

I have lost almost couple of weeks trying to find the answer to this and to no avail. I quit trying to use webpack-dev-middleware to handle server refreshing so I am back to using nodemon to handle restarting my backend during development phase.

The project structure is as follows (it's mostly basic, just trying to get the general out of the way):

  • /
    • dev/ (output)
    • prod/ (output)
    • src/
      • index.ts
      • tls/
        • key.pem
        • cert.pem
        • configuration.ts

configuration.ts

import fs from "fs";

export const configuration = {
  key: fs.readFileSync("./key.pem"),
  cert: fs.readFileSync("./cert.pem"),
  passphrase: "passphrase"
};

As I have mentioned in the title, I am trying to handle moving of said .pem files to my development and production output directories with webpack. I have created both of these files (with some passphrase) by using this command:

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365

These two files (key and certificate), and the TypeScript files that is reading these key and cert files. As these two are required to have HTTPS on the server side, I am trying to have them moved to dev/ and prod/ directories (depending which environment I am working in of course), and I want the files to be read there after I start the server.

This was all doable without webpack, by just regularly using node index.server.js and starting the server file which is reading the key and cert files, but as I am trying to force myself to use typescript everywhere, I am also in need of modules which in turn require webpack and it creates this problem. I am new to backend and I am trying to use some good practices to handle login, hence I am trying to resolve this TLS/SSL issue to have cookie login with some best-practices flags.

I have tried few things with file-loader, but no luck, and searching for this issue's solution led me nowhere mostly. If you require more information let me know I will do my best to answer, and thanks in advance.

EDIT: After I am trying to console.log the configuration variable from the SSL/TLS configuration file, this is what webpack assembles in the end:

var configuration = {
    key: fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync("./key.pem"),
    cert: fs__WEBPACK_IMPORTED_MODULE_0___default.a.readFileSync("./cert.pem"),
    passphrase: "passphrase"
};

My Webpack configuration(s) - I have common, dev and prod files, here are the common and dev for example:

webpack.common.js

const webpackNodeExternals = require("webpack-node-externals"),
  configuration = {
    target: "node",
    entry: {
      index: "./src/index.ts"
    },
    externals: [webpackNodeExternals()],
    resolve: {
      extensions: [".ts", ".js"]
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          include: /src/,
          loader: "ts-loader"
        }
      ]
    }
  };

module.exports = configuration;

webpack.dev.js

const path = require("path"),
  merge = require("webpack-merge"),
  common = require("./webpack.common"),
  webpackShellPlugin = require("webpack-shell-plugin"),
  configuration = merge(common, {
    mode: "development",
    devtool: "source-map",
    watch: true,
    plugins: [
      new webpackShellPlugin({
        onBuildEnd: ["npm run dev:run"]
      })
    ],
    output: {
      path: path.resolve(__dirname, "../dev"),
      filename: "[name].server.js"
    }
  });

module.exports = configuration;

package.json

    "dev:start": "webpack --config ./configurations/webpack.dev.js",
    "dev:run": "nodemon -r dotenv/config ./dev/index.server.js",
    "prod:start": "webpack --config ./configurations/webpack.prod.js"
  }
Kresimir Cosic
  • 1
  • 2

1 Answers1

0

I have resolved my problem I believe. I have used a different way to generate SSL/TLS key/certificate as listed here.

After that I managed to figure out I was missing some essential Webpack configuration, since the process was figuring __dirname meant root somehow, so I added this into the configuration:

node: {
  __dirname: false,
  __filename: false
}

The app is now successfully serving production and development environments.

Kresimir Cosic
  • 1
  • 2