Friday, 21 April 2017

Deploying web page with express js and webpack 2

I want to deploy a web page in production built on NodeJS + ExpressJS. The structure of my development project is as follows:

enter image description here

My idea is to use webpack to be able to package all my * .JS code, and all my static files inside the same folder as "bundle", where all the injected dependencies are contained, and thus do not have to install the Node_modules or bower_components on the server directly, but this all contained in the compiled * .js final file or in the assets sorted correctly. Currently, I successfully create my "deploy" folder, and successfully compile my * .js file, but the problem appears when I want to use my web application. The internal paths from the HTML files are broken, since the definitions in my app.js file do not correspond with the new final project structure. This is my production webpack file:

const path = require('path')
const webpack = require('webpack')
const TransferWebpackPlugin = require('transfer-webpack-plugin')

module.exports = {
  context: path.join(__dirname),
  entry: [
    path.resolve(__dirname, 'src/www/server.js')
  ],
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'deploy'),
    filename: 'web-wildevs.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['latest']
        }
      }
    ]
  },
  resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, 'bower_components')
    ],
    extensions: [
      '.html',
      '.css',
      '.js',
      '.yml'
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new TransferWebpackPlugin(
      [
        {
          from: path.join(__dirname, 'public/assets/css'),
          to: 'assets/css'
        },
        {
          from: path.join(__dirname, 'public/assets/images'),
          to: 'assets/images'
        },
        {
          from: path.join(__dirname, 'public/assets/js'),
          to: 'assets/js'
        },
        {
          from: path.join(__dirname, 'public/assets/plugins'),
          to: 'assets/plugins'
        },
        {
          from: path.join(__dirname, 'bower_components'),
          to: 'assets/plugins'
        },
        {
          from: path.join(__dirname, 'public/other'),
          to: 'other'
        },
        {
          from: path.join(__dirname, 'public/pages'),
          to: 'pages'
        },
        {
          from: path.join(__dirname, 'public/views'),
          to: 'views'
        }
      ],
      path.resolve(__dirname, './')
    ),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

The "deploy" folder, compiled and list has the following structure:

enter image description here

When you run the web-production.js file, a problem occurs indicating that you can not find the requested html file. This is my home.js driver:

import path from 'path'

exports.getHome = (req, res) => {
    res.status(200).sendFile(path.join(__dirname, 'views/es', 'es-home.html'))
}

As I understand it, when using path.join (__ dirname), __dirname refers to the place where the script is executed, in this case, where this compiled would be the / deploy directory, and then, you have to follow the path by view / es /es-home.html, however it can not find the file, as it returns the following log message:

enter image description here

At this point, I do not know how to proceed. I have several doubts about this approach that I am adopting to make the deployment in production of this pagian web. Is it correct what I am asking? Or what would be the correct way to deploy a virtual machine to DigitalOcean, by giving an example?



via Ata Sanchez

No comments:

Post a Comment