Related
I want to redirect all traffic to my pricing page via a subdomain to my homepage. I can't figure out how to add wildcards in the has value.
This syntax does not work:
// next.config.js
module.exports = {
target: 'serverless',
async redirects() {
return [
{
source: '/pricing',
has: [
{
type: 'host',
value: '*.*.*',
},
],
permanent: false,
destination: 'https://example.com/'
}
]
},
}
Any ideas?
Vercel support helped me find the solution. I needed to update my regex in the value.
// next.config.js
module.exports = {
target: 'serverless',
async redirects() {
return [
{
source: '/pricing',
has: [
{
type: 'host',
value: '.*\\..*\\..*'
},
],
permanent: false,
destination: 'https://example.com/'
}
]
},
}
If you want to redirect the subdomain, you would add the redirect on that project. If you want the contents of the subdomain (e.g. pricing.example.com) to show up on a different project at /pricing, you would use a rewrite.
module.exports = {
async rewrites() {
return [
{
source: '/pricing',
destination: 'https://pricing.example.com'
},
]
},
}
Problem
When building and starting a production build of our application, no css is loaded. CHecking the devtools, I can see a myriad of errors and warnings:
Possible Culprits
I do not experience any of these problems, when starting the app in dev mode. Also, other assets like images or fonts are loaded correctly. We use scss and import the global stylesheet in _app.tsx like this:
import "../styles/globals.scss";
In order to solve a problem with another library, we had to setup a custom webpack config:
module.exports = phase => ({
webpack: (config, { isServer }) => {
config.module.rules.push({
test: /\.node$/,
use: "node-loader"
});
config.module.rules.push({
test: /\.(ts|js)x?$/,
use: [
{
loader: "ts-loader",
options: {
transpileOnly: true,
experimentalWatchApi: true,
onlyCompileBundledFiles: true
}
}
],
include: [path.resolve(__dirname, "node_modules/#private/")],
exclude: [path.resolve(__dirname, "node_modules/#private/src/styleguide")]
});
if (!isServer) {
config.module.rules.push({
test: /\.s?[ac]ss$/i,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{
loader: "resolve-url-loader",
options: { removeCR: true, debug: true }
},
{ loader: "sass-loader" }
]
});
}
config.module.rules.push({
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
exclude: /node_modules/
}
}
],
exclude: [path.resolve(__dirname, "node_modules/#private/src")]
});
return config;
}
});
Also, we this is the file of the custom server we use to start the application in production mode:
const PORT = parseInt(process.env.PORT, 10) || 3364;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get("*", (req, res) => handle(req, res));
server.listen(PORT, err => {
if (err) throw err;
console.log(`🐎 => Ready on http://localhost:${PORT}`);
});
});
Assumptions
As the custom server is the only difference between production and development, I can only assume that the error is maybe somewhere there. But it looks fine to me. So if anybody has a hint or an idea, I would be very grateful.
Ok, I just deleted the .next folder prior to building the production version via npm run build and after that, everything worked. Seems like there is some problems with the chunk generation when the .next folder is there.
I want to use Linaria library(https://github.com/callstack/linaria) with nextJS.
Now, I implemented according to the document. But occurred the next error.
Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
I understood this error. But I wondered. How can I use Linaria with NextJS?
.babelrc
{
"presets": ["next/babel", "linaria/babel"],
}
next.config.js
const path = require("path");
module.exports = {
webpackDevMiddleware: (config) => {
config.watchOptions = {
poll: 1000,
aggregateTimeout: 300,
};
return config;
},
webpack: (config) => {
config.module.rules.push({
test: /\.tsx$/,
use: [
{
loader: "linaria/loader",
options: {
sourceMap: process.env.NODE_ENV !== "production",
},
},
],
});
return config;
},
};
There is a recent linaria issue on this topic. It seems people are finding success with the following next.config.js config:
const withCSS = require('#zeit/next-css');
module.exports = withCSS({
webpack(config) {
// retrieve the rule without knowing its order
const jsLoaderRule = config.module.rules.find(
(rule) => rule.test instanceof RegExp && rule.test.test('.js')
);
const linariaLoader = {
loader: 'linaria/loader',
options: {
sourceMap: process.env.NODE_ENV !== 'production',
},
};
if (Array.isArray(jsLoaderRule.use)) {
jsLoaderRule.use.push(linariaLoader);
} else {
jsLoaderRule.use = [jsLoaderRule.use, linariaLoader];
}
return config;
},
});
I've added .scss styling to my site. The .scss files sit next to their .jsx components.
I reference the styles in .jsx like this:
import styles from './guest-card.component.scss'
...
<Card className={styles.card}>
Everything looks great when I run my local server webpack-dev-server --inline --progress --config build/webpack.cold.conf.js
When I build for distributing the app, such as Development machine or QA machine I run npm run build. This builds a dist folder with everything compiled.
When I view my site on a dev/qa server my styles are missing.
Looking in the dist folder I see a /static/css/app.css with my compiled styles. Great! The styles look correct.
My question: What do I do to include these /static/css/app.css in my production site? I tried adding a <link rel="stylesheet" ... to include it and im sure that would work but would give a 404 on my local machine.
Whats the correct way of having styles built
So my question is:
My question is - how do I get my app to reference this new app.css? If I add a
build.js
'use strict';
require('./check-versions')();
process.env.NODE_ENV = 'production';
const ora = require('ora');
const rm = require('rimraf');
const path = require('path');
const chalk = require('chalk');
const webpack = require('webpack');
const config = require('../config');
const webpackConfig = require('./webpack.prod.conf');
const spinner = ora('building...');
spinner.start();
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err;
webpack(webpackConfig, function (err, stats) {
spinner.stop();
if (err) throw err;
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n');
if (stats.hasErrors()) {
console.log(chalk.red(' Build failed with errors.\n'));
process.exit(1)
}
console.log(chalk.cyan(' Build complete.\n'));
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
});
webpack.prod.conf.js
const paths = require('./paths');
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: require('../config/prod.env');
const webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true,
usePostCSS: true
})
},
devtool: config.build.productionSourceMap ? config.build.devtool : false,
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].js'),
chunkFilename: utils.assetsPath('js/[id].js')
},
resolve: {
alias: {
settings: `${paths.settings}/dist.js`
}
},
plugins: [
new webpack.DefinePlugin({
'process.env': env
}),
// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
// extract css into its own file
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].css'),
// set the following option to `true` if you want to extract CSS from
// codesplit chunks into this main css file as well.
// This will result in *all* of your app's CSS being loaded upfront.
allChunks: false,
}),
// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
host: '#_host_#',
template: 'index.html',
inject: false,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// keep module.id stable when vender modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks(module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(paths.nodeModules) === 0
);
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: paths.static,
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
]),
// copy any extra assets to root dist
new CopyWebpackPlugin([
{
from: `${paths.root}\\web.config`,
to: config.build.dist,
ignore: ['.*']
}
])
]
});
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin');
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
`\\.(${
config.build.productionGzipExtensions.join('|')
})$`
),
threshold: 10240,
minRatio: 0.8
})
);
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
module.exports = webpackConfig;
webpack.base.conf.js
const paths = require('./paths');
const utils = require('./utils');
const config = require('../config');
module.exports = {
context: paths.root,
entry: {
app: './src/main.jsx'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
'#': paths.src,
api: paths.api,
settings: `${paths.settings}/local.js`
}
},
externals: {
bamboraCheckout: 'customcheckout'
},
module: {
rules: [
...(config.dev.useEslint ? [{
test: /\.js$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [paths.src, paths.test],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
}] : []),
{
test: /\.(js|jsx|mjs)$/,
loader: 'babel-loader',
include: [paths.src, paths.test]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
};
webpack.cold.conf.js
const paths = require('./paths');
const merge = require('webpack-merge');
const devWebpackConfig = require('./webpack.hot.conf.js');
module.exports = new Promise(resolve => {
devWebpackConfig.then(base => {
let webpackConfig = merge(base, {
resolve: {
alias: {
api: `${paths.api}/fakes`
}
}
});
resolve(webpackConfig);
})
});
If you miss link to your generated style file in index.html then you should search for problem here, because this plugin is responsible for it
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
host: '#_host_#',
template: 'index.html',
inject: false,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
}
I just looked through plugin documentation, probably you need to remove inject: false. Default is true, and is putting your assets into index.html
I have been trying to get a working wallaby.js configuration file for my meteor project and simply can't get it to work. I've borrowed from https://github.com/xolvio/automated-testing-best-practices and I have this currently:
const babel = require('babel-core')
const path = require('path')
const wallabyWebpack = require('wallaby-webpack')
module.exports = function (wallaby) {
const webpackConfig = {
resolve: {
root: path.join(wallaby.projectCacheDir, 'imports'),
extensions: ['', '.js', '.jsx', '.json']
},
module: {
loaders: [
// JavaScript is handled by the Wallaby Babel compiler
{ test: /\.json$/, loader: 'json-loader' }
]
}
}
const wallabyPostprocessor = wallabyWebpack(webpackConfig)
const appManifest = require(path.resolve('../.meteor/local/build/programs/web.browser/program.json')).manifest;
const meteorPackageFiles = appManifest
.filter(function (file) {
return file.type === 'js' && file.path.startsWith('packages/')
})
.map(function (file) {
/* var basePath = packageStubs.indexOf(file.path) !== -1 ?
'tests/client/stubs' :
'src/.meteor/local/build/programs/web.browser';
*/
var basePath = '../.meteor/local/build/programs/web.browser'
return { pattern: path.join(basePath, file.path) }
})
return {
files: [
{ pattern: '**/*.test.*', ignore: true },
'startup/**/*.jsx',
'startup/**/*.js'
].concat(meteorPackageFiles),
tests: [
'**/*.test.*'
],
compilers: {
'**/*.js*': wallaby.compilers.babel({
babel,
presets: ['react', 'es2015', 'stage-2']
})
},
env: {
type: 'node'
},
testFramework: 'mocha'
}
}
This code successfully loads the startup files for the client-side, and the tests, but this simple test:
import should from 'should'
import buildRegExp from './buildregexp.js'
describe('buildRegExp', function() {
it('splits on word characters', function() {
buildRegExp('test this-thing:out').should.equal('(?=.*test)(?=.*this)(?=.*thing)(?=.*out).+')
})
})
fails on line 1, because the npm module "should" is not found.
Does anyone have a working wallaby config or should I just give up?
meteor test --driver-package=practicalmeteor:mocha works, so the error is in the wallaby config.