Operating System: OSX
Node: 8.4.0
NPM: 5.3.0
webpack: ^3.8.1
webpack-dev-server: ^2.9.4
webpack.config.js
const join = (modulePath) => path.join(process.cwd(), modulePath);
const port = 3000;
let config = {
entry: {
app: join('app')
},
output: {
filename: '[name].js',
path: join('dist'),
pathinfo: true,
publicPath: `http://localhost:${port}`
},
devServer: {
contentBase: './app',
historyApiFallback: true,
inline: true,
port,
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015'],
}
}
]
}
]
},
plugins: [
new CleanWebpackPlugin(['dist', 'build'], {
root: process.cwd()
}),
new HtmlWebpackPlugin({
template: 'app/index.html',
filename: 'index.html'
})
]
};
module.exports = config;
nginx reverse proxy config
server {
listen 80;
server_name www.domain1.com;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location /srilanka/ {
proxy_pass http://localhost:3000/;
}
}
hosts
127.0.0.1 www.domain1.com
I use nginx reverse proxy + webpack-dev-server
For IOS devices, it throw an error:
Failed to load resource: Could not connect to the server http://localhost:3000/app.js
PC and android device works fine.
Expected Behavior
use IOS device access website should works fine.
Actual Behavior
I use IOS device safari web inspector find this error.
I create an repo, so you can reproduce this behavior easily
https://github.com/mrdulin/webpack-dev-server
Related
I'm trying to make a static website using Wordpress and Gatsby everything works fine locally but when I try to use it on a staging site I get this error :
Path: /wp-json
The server response was "401 Unauthorized"
Inner exception message: "You are not currently logged in."
ERROR #11321 PLUGIN
So is there a way to give Gatsby access to my Wordpress website using my credentials ?
My gatsby-config.js :
module.exports = {
siteMetadata: {
},
plugins: [
{
resolve: `gatsby-source-wordpress`,
options: {
baseUrl: `web-staging.******.io`,
protocol: `https`,
hostingWPCOM: false,
useACF: false,
},
},
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
],
}
See the options for the plugin, specifically auth:
auth: {
// If auth.user and auth.pass are filled, then the source plugin will be allowed
// to access endpoints that are protected with .htaccess.
htaccess_user: "your-htaccess-username",
htaccess_pass: "your-htaccess-password",
I'm setting up a simple app using ASP .NET MVC 4 and React / React Router running on IIS. Everything is working fine when running on my local IIS express (the instance that is started by Visual Studio), but when trying to run on production, I get a blank page. No JS errors or 404s, the bundle is being loaded correctly but not executing.
I'm totally lost on why this would be working in the local IIS started by VS2013 but not running when moving the project to run as an application on an existing IIS website. Any and all help would be appreciated.
I have only one catch-all route set up in RouteConfig.js which serves Index.cshtml using View():
routes.MapRoute(
name: "Default",
url: "{*url}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
My single .cshtml file is:
<div id="app"></div>
#Scripts.Render("~/Scripts/dist/bundle.js")
And my webpack.config.js file is:
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, './src/js/App.jsx'),
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
resolve: {
alias: {
Components: path.resolve(__dirname, './src/js/components'),
Pages: path.resolve(__dirname, './src/js/pages'),
Util: path.resolve(__dirname, './src/js/util'),
Styles: path.resolve(__dirname, './src/scss/'),
}
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s?css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
},
]
}
};
Turns out it was not a problem with my config but rather with my React Router. The dev site's base URL is just "/", but the version I was deploying to has a base URL of "/appName". Setting the "basename" prop of my BrowserRouter fixed the issue.
When I used the following config deploying to digitalocean, I did a $ mup setup with no errors and then ran $ mup deploy and everything went well until it tried to prepare bundle...what am I missing here?
This is the error I'm getting with the following config when deploying...
module.exports = {
servers: {
one: {
host: 'xxx.xxx.xxx.xxx',
username: 'root',
pem: "~/.ssh/id_rsa"
}
},
app: {
name: 'hotel',
path: '../hotel',
// this is my local path to the application root
servers: {
one: {},
},
buildOptions: {
serverOnly: true,
},
env: {
ROOT_URL: 'http://xxx.xxx.xxx.xxx',
MONGO_URL: 'mongodb://localhost/meteor',
},
docker: {
image: 'abernix/meteord:base',
},
// Show progress bar while uploading bundle to server
// You might need to disable it on CI servers
enableUploadProgressBar: true
},
mongo: {
version: '3.4.1',
servers: {
one: {}
}
}
};
I just use simple grunt-webpack and it is not working.
Always get 404. I need to use the Angular 2 router I can see webpack-dev-server is not working, not serving.
In the config I tried:
output: {
path: root(folder.build.dist.root),
publicPath: '/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
devServer: {
historyApiFallback: {
index: '/index.html'
},
stats: true,
inline: true,
progress: true
}
Yes, a fixed it!
I was using grunt-webpack, so the config devServer not working.
I had to add the devServer config with grunt like this:
"webpack-dev-server": {
options: {
webpack: webpackConfigDev,
},
'cory-run': webpackConfigDev.devServer
},
I'm really struggling serving a static file in Express + Webpack.
The file is a plain css stylesheet, but I can't get the html page to load it.
Here's my current configuration:
server.js
var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var webpackHotMiddleware = require('webpack-hot-middleware')
var config = require('./webpack.config')
var express = require('express')
var app = new express()
var port = 3005
var compiler = webpack(config)
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
app.use(webpackHotMiddleware(compiler))
// this should tell express that files located under the /public/ folder are static
app.use(express.static(__dirname + '/public'));
app.use(function(req, res) {
res.sendFile(__dirname + '/index.html')
})
app.listen(port, function(error) {
if (error) {
console.error(error)
} else {
console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
}
})
A quite standard webpack.config.js:
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname
}]
}
}
Here's the css inclusion in the index.html file:
<link ref="stylesheet" type="text/css" href="/styles/style.css">
I have the style.css file located in public/styles/style.css, so I should see it, right?
In fact, if I go to http://localhost:3005/styles/style.css the file is available and served correctly, however trying to load it through index.html does not work. It seems like the network request is never sent.
Any idea on how to fix this? Am I missing something basilar about express/webpack?
I'm also using react-router, if this may ever be relevant to the issue.
I managed to fix it:
Just installed the appropriate npm packages css-loader and style-loader and added the appropriate loaders to webpack.config.js:
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
resolve: {
alias: {
'styles': path.join(__dirname, 'styles'),
},
extensions: ['', '.js', '.jsx', '.css']
},
module: {
loaders: [{
test: /\.js$/,
loaders: [ 'babel' ],
exclude: /node_modules/,
include: __dirname
}, {
test: /\.css?$/,
loaders: [ 'style-loader', 'css-loader' ],
include: __dirname
}]
}
}
Also worth noting that I moved the css file from public/styles to styles.
Upon fixing this and adding the appropriate import 'styles/dashboard.css' to index.js everything works fine now! Loading the file from html <link ref="stylesheet" type="text/css" href="/styles/style.css"> is useless, since is bundled inside the main javascript file.