I am totally new to NodeJS, Webpack and especially to Outlook Addin.
However, when it came to deployment on Production, I struggled a lot. I put all my code up on Production (Ubuntu instance). Then I tried to start my Outlook Addin, just like I was doing locally, it started on port 3000, but there was no response to any API call and it is not showing any images which are static resources.
I want to know what could be the reason behind this and how to solve this problem.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
polyfill: 'babel-polyfill',
app: './src/index.js',
'function-file': './function-file/function-file.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /\.html$/,
exclude: /node_modules/,
use: 'html-loader'
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: 'file-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
chunks: ['polyfill', 'app']
}),
new HtmlWebpackPlugin({
template: './function-file/function-file.html',
filename: 'function-file/function-file.html',
chunks: ['function-file']
})
]
};
Related
I'm not sure what is going on but I have a very basic Vite setup, yet I'm seeing the local server serve up all my jsx files, which takes a good 10-15s when I do a fresh reload. At first I thought this just might be the way Vite works for development but even when trying to build for production it does the same thing and doesn't minimize or uglify the files but just serves the jsx as is.
enter image description here
The following is my vite.config.js. The commented out code is other things that I've tried with no success:
export default ({mode}) => {
return defineConfig({
root: 'app',
define: {global: 'window'},
// esbuild: {
// loader: "jsx",
// minify: true,
// minifySyntax: true,
// },
// optimizeDeps: {
// esbuildOptions: {
// minify: true,
// minifySyntax: true,
// loader: {
// ".js": "jsx",
// ".ts": "tsx",
// },
// },
// },
plugins: [react()],
// build: {
// outDir: '../dist',
// minify: true,
// },
server: {
host: '127.0.0.1',
port: 3000
}
})
};
I've tried numerous configuration options and tried every rollup/vite config option I could find on stack overflow and the internet. I'd expect vite to serve only the produced index.html and generated index.jsx file, not get all my source files as is.
This project originally did use webpack, but even then I wasn't doing anything special. Here is my webpack config incase that's helpful:
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'development',
devtool: 'eval-source-map',
entry: [
'webpack-dev-server/client?http://vesta-dev.localhost.com:3000',
'webpack/hot/dev-server',
'react-hot-loader/patch',
path.join(__dirname, 'app/index.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].[hash].js',
publicPath: '/'
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new webpack.DefinePlugin({
...
})
],
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
exclude: [/node_modules/, /__tests__/],
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '.eslintrc'),
failOnWarning: false,
failOnError: false,
emitError: false,
emitWarning: true
}
},
{
test: /\.js?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: ['react-hot-loader/babel']
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
use: ['style-loader','css-loader','sass-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]']
},
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader' },
{
test: /\.woff(2)?(\?[a-z0-9#=&.]+)?$/,
loader: 'url-loader',
options: {
limit: '10000',
mimetype: 'application/font-woff'
}
},
{ test: /\.(ttf|eot|svg)(\?[a-z0-9#=&.]+)?$/, loader: 'file-loader' },
]
}
};
Looks like this is normal for when you use vite serve as that always serves the development environment, no matter what flags you set or command line options you pass in.
I thought it was interesting that no one talks about the jsx files actually being served in the network traffic and even with all my searching never came across anyone talking about this, nor in the Vite documents so I thought something was wrong.
My server starts and runs correctly, but when I hit the URL in the browser it gives an error "cannot find module 'fs'".
I tried to setting:
target: 'node', but it starts another error
node: { fs: 'empty' }, but then it gives an error "cannot find exports"
"use strict";
const webpack = require('webpack');
const argv = require('minimist')(process.argv.slice(2));
const DEBUG = !argv.release;
const path = require('path');
var plugins = [
new webpack.optimize.CommonsChunkPlugin({
names: ['common', 'vendors'],
filename: '[name].js',
minChunks: Infinity
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
"process.argv.verbose": !!DEBUG
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery"
})
].concat(DEBUG ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: {
warnings: true
}
}),
new webpack.optimize.AggressiveMergingPlugin()
]);
module.exports = {
entry: {
app: path.join(__dirname, '..', 'app', 'app.js'),
vendors: [
'react',
'react-dom',
'react-bootstrap',
'react-router',
'alt',
'lodash',
'superagent',
'react-router-role-authorization',
'react-validation-decorator'
]
},
output: {
publicPath: '/js/',
path: './wwwroot/js/',
filename: '[name].js',
chunkFilename: "[id].[name].js"
},
context: path.join(__dirname, '..'),
plugins: plugins,
cache: DEBUG,
debug: DEBUG,
watch: DEBUG,
stats: {
colors: true
},
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json']
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel-loader']
},
{
test: /\.(less|css)$/,
loaders: ["style", "css", "less"]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
loader: 'url-loader?limit=10000'
},
{
test: /\.(eot|ttf|wav|mp3|mp4)$/,
loader: 'file-loader'
},
{
test: /\.json$/,
loader: 'json-loader'
}
]
},
node: {
net: 'mock',
dns: 'mock'
}
};
It should not give this error and work correctly.
I don't see any mention of the fs module in your posted webpack setup. So, my guess is that your output application (app.js?) is trying to require and use fs. Webpack is building a client-side, front-end application, one that will be loaded in the browser; fs is not available in the browser.
(Double-check and make sure you aren't trying to, for example, read and write files on the user's machine using fs inside your client-side application. That is not possible in a browser-based application. For an intro to the concept of web applications with a front end and back end, check out the article React App With Node Backend.)
I've lost too many hours trying to debug an SSR react application (the server side). We're building an app from scratch, and it's a very large project so debug the code is really important.
The webpack config for the server is the following:
const path = require('path');
const merge = require('webpack-merge');
const webpackNodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const baseConfig = require('./app.webpack.base');
const server = {
name: 'server',
entry: ['./app/server/index.js'],
target: 'node',
mode: 'development',
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'public/server'),
filename: 'server.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: [/\.svg$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: 'file-loader',
exclude: /node_modules/,
options: {
name: 'public/media/[name].[ext]',
publicPath: (url) => url.replace(/public/, ''),
emit: false
}
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'css-loader/locals'
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'SERVER_SIDE': true,
'ENVIRONMENT': JSON.stringify(process.env.NODE_ENV),
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
],
externals: [webpackNodeExternals()]
};
module.exports = merge(baseConfig, server);
The baseConfig only adds a loader for js and jsx files:
module: {
rules: [
{
test: [/js$/, /\.jsx?$/],
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
I can't debug it neither in VSCode nor Chrome.
In VSCode, I get the famous:
Unverified breakpoint, Breakpoints set but not yet bound
I'm running the generated server.js file (after bundled with webpack) with node --inspect flag:
I've tried many launch.json configs, example:
{
"name": "Attach to Process",
"type": "node",
"protocol": "inspector",
"request": "attach",
"port": 9229,
"sourceMaps": true
}
And in Chrome, if I open the DevTools for Chrome, I am able to see the source maps and set breakpoints but they never get hit.
I will be very grateful with you guys if you can give me a hand with this. Any insight or idea is appreciated too.
Thanks.
You can check out my solution here. By the way, I had some experiments with SSR here
I've created a vendor bundle of all my third party scripts. I'm referencing the new vendor.bundle.js into my index.html file.
It seems as though none of the third party scripts are actually accessible from my main.js file. Any ideas what I'm potentially doing incorrectly?
webpack.config.js
var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
entry: {
vendor: ['babel-polyfill', 'jquery', 'jquery-match-height'],
main: './src/main.js'
},
output: {
path: './dist',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/, loader: 'babel', exclude: /node_modules/,
query: { plugins: ['transform-runtime'], presets: ['es2015'] }
}
]
},
plugins: [
new CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"vendor.bundle.js")
]
};
I'm having an issue getting my typings correctly after I've added the router package to my Angular application (which required an upgrade of Core, Common, Compiler etc.).
Googling ob that specific error code led me to a number of problems, the main resolution for which is removing node_modules and typings and recreating them. I've done so but experience the same misbehavior.
On SO, there's another question but it's old, relates to a different versions of most of the packages and I hardly see how it relates to my problem.
Frankly, I'm a bit lost because I have no idea how to troubleshoot it at all. Below is my tsconfig.json if it helps to spot something odd.
edit
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const distribution = path.resolve(__dirname, "distribution");
const application = path.resolve(__dirname, "source/application");
const resources = path.resolve(__dirname, "source/resources");
module.exports = {
entry: "./source/application/main.ts",
output: {
path: distribution,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.png$/, loader: "raw-loader", include: [resources] },
{ test: /\.s(a|c)ss$/, loaders: ["raw-loader", "sass-loader"] },
{ test: /\.html$/, loader: "raw-loader", include: [application] },
{ test: /\.ts$/, loader: "ts-loader", include: [application] },
]
},
resolve: {
modules: ["node_modules", application],
extensions: [".js", ".ts"]
},
performance: {},
devtool: "source-map",
context: __dirname,
target: "web",
externals: [],
stats: {},
devServer: {
contentBase: distribution,
port: 3002
},
plugins: [
new HtmlWebpackPlugin({ template: "./source/index.html" }),
new CopyWebpackPlugin([{ from: "./source/resources", to: "resources" }])
]
}
In Webpack.common.js remove the line debug=true, and change the below code
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['*', '.js', '.ts']
},
module: {
rules: [
]},
plugins: [
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),