I'm having a problem when running next build on my local machine (Windows 10) the command builds the app successfully
But when doing so on my server (running on linux 4.18.0-372.9.1.1.lve.el8.x86_64 the build hangs indefinitely, this was tested on my current project, I've also tried testing on a new project created on the linux server and got the same issue
I tried skipping linting and type checks from next.config.js but it still hangs
I noticed this process running while the app is "building", might be the source of the issue but I'm not sure
I might also be missing some dependencies that I am not aware of, any ideas?
Edit (1)
// next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
distDir: "./build",
images: {
remotePatterns: [
{
protocol: "http",
hostname: "localhost",
port: "1337",
pathname: "/uploads/**",
},
{
protocol: "http",
hostname: "127.0.0.1",
port: "1337",
pathname: "/uploads/**",
},
],
},
async redirects() {
return [
{
source: "/news",
destination: "/",
permanent: false,
},
];
},
};
const withBundleAnalyzer = require("#next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
module.exports = withBundleAnalyzer(nextConfig);
Edit (2)
While the app is building, the cpu usage shoots between 92% and 100%, without building it rests at 14%
Is there a way to bypass running tests with jest while building?
Related
Migrating a react application to an Nx integrated workspace, and having an issue with advanced proxy configuration.
I understand that for a simple proxy...
Specify the proxy.conf.json file
"serve": {
"executor": "#nrwl/webpack:dev-server",
"defaultConfiguration": "development",
"options": {
"verbose": true,
"buildTarget": "ydsca:build",
"hmr": true,
**"proxyConfig": "apps/ydsca/proxy.conf.json",**
"ssl": true,
"sslKey": "certs/localhost.key.pem",
"sslCert": "certs/localhost.crt.pem"
},
Implement the proxy.conf.json file, e.g....
{
"/caconnect/common/*": {
"target": "https://127.0.0.1:9443",
"secure": false,
"logLevel": "debug"
}
}
This works without any issues, however, the current React application uses "http-proxy-middleware" and a more advanced setupProxy.js file (wildcard matching such as "/**/common/" for any patch that contains /common/):
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
[
'/**/common/',
'/**/commonClassic/',
'/**/ydscaCommon/',
'/ymca',
'/staff'
],
createProxyMiddleware({
//Must use 127.0.0.1 as for some reason, localhost stopped working in node versions > 16
target: 'https://127.0.0.1:9443',
//Necessary for https with self signed certificates
secure: false,
changeOrigin: false,
//Additional logging stuff!
onProxyReq: function onProxyReq(proxyReq, req, res) {
// Log outbound request to remote target
console.log('--> ', req.method, req.path, '->', proxyReq.baseUrl + proxyReq.path);
},
onError: function onError(err, req, res) {
console.error(err);
res.status(500);
res.json({error: 'Error when connecting to remote server.'});
},
//logLevel: 'debug'
})
);
};
How can the same advanced proxying be configured in Nx?
Tried changing proxyConfig": "apps/ydsca/proxy.conf.json" to proxyConfig": "apps/ydsca/setupProxy.js", but it doesn't seem to like javascript files for proxy configuration!
Any suggestions?
Thank you.
I've a micro frontends running on monorepo using nx CLI where in the host application I'm using module federation to get the remoteEntry.js files from all the micro frontends and serve them as components per route.
I've error boundary which works perfect on dev / staging / production environment and displays 404 page when the remoteEntry is not fetched / crashed for some reason and it works as expected.
But when I want to run unit tests on the shell application to test its functionality and I'm running only the shell application, for some reason I'm receiving errors from webpack saying the following:
Loading script failed.
(error: http://localhost:3107/remoteEntry.js)
Which is expected, because I didn't run any of the micro frontends.
What I want to achieve is that I will be able to run only the shell application locally and get the 404 page also on local without having this error, in other words - I want to handle the errors when the micro frontends are not live.
Any suggestions how can I achieve that?
webpack file on the shell application:
const nrwlConfig = require('#nrwl/react/plugins/webpack.js');
const { ModuleFederationPlugin } = require('webpack').container;
const deps = require('../../package.json').dependencies;
const { remoteEntries } = require('./remoteEntries');
const EnvType = {
LOCAL: 'local',
PLAYGROUND: 'playground',
DEVELOPMENT: 'development',
STAGING: 'staging',
PRODUCTION: 'production',
};
module.exports = (config) => {
nrwlConfig(config);
config.optimization.runtimeChunk = 'single';
return {
...config,
plugins: [
...config.plugins,
new ModuleFederationPlugin({
name: 'hostApp',
filename: 'remoteEntry.js',
remotes: {
app1: `app1#${getRemoteEntryUrl(remoteEntries.APP1)}`,
app2: `app2#${getRemoteEntryUrl(remoteEntries.APP2)}`,
app3: `app3#${getRemoteEntryUrl(
remoteEntries.APP3
)}`,
app4: `app4#${getRemoteEntryUrl(
remoteEntries.APP4
)}`,
app5: `app5#${getRemoteEntryUrl(remoteEntries.APP5)}`,
app6: `app6#${getRemoteEntryUrl(
remoteEntries.APP6
)}`,
app7: `app7#${getRemoteEntryUrl(
remoteEntries.APP7
)}`,
},
shared: {
...deps,
react: {
singleton: true,
eager: true,
requiredVersion: deps.react,
},
'react-dom': {
singleton: true,
eager: true,
requiredVersion: deps['react-dom'],
},
},
}),
],
};
};
const getRemoteEntryUrl = (entry) => {
const { NODE_ENV } = process.env || EnvType.DEVELOPMENT;
if (NODE_ENV !== EnvType.LOCAL) {
return entry.remoteEntries[NODE_ENV];
}
return `http://localhost:${entry.localPort}/remoteEntry.js`;
};
I recently move from vue-cli 4.5.x to 5.0.x.
Since this upgrade it seems Server Sent Events (SSE) doesn't work any more with the WebPack Dev Server.
(I'm currently using vue-sse)
Note in production it works perfectly.
My devServer config looks like :
devServer: {
proxy: {
"/api": {
target: "http://localhost:8080",
ws: true,
changeOrigin: true,
},
},
},
It seems possible workarounds are :
Disable compression in the webpack devserver config.
Send Content-Type: no-transform in the response header.
(source : https://composed.blog/sse-webpack-dev-server)
I didn't test the 2. way but the 1. works for me.
devServer: {
proxy: {
"/api": {
target: "http://localhost:8080",
ws: true,
changeOrigin: true,
},
},
// To disable compression :
compress: false
},
If this doesn't help maybe you face this similar issue : https://forum.vuejs.org/t/server-sent-events-are-not-working-with-vue-cli-devserver-proxy-and-node-16-0/125450
When I serve my project using grunt-contrib-connect, I need it to run using https, and in the browser the root path needs to be:
https://localhost/
I am not familiar with how to set this up using the proxy option in grunt-contrib-connect.
My grunt.initConfig setup is:
connect: {
server: {
options: {
port: 80,
base: 'dist',
protocol: 'https',
livereload: true,
keepalive: true,
debug: true,
hostname: 'localhost',
open: true
}
}
},
```
This serves the project to https://localhost:80/
I will finish setting up livereload once this is working correctly.
Thanks for your help.
For https without a port number in the address bar, port needs to be set to 443, and for livereload you must have simple, self-generated certificates created - they can reside in the project folder as they are in no way connected with security.
The connect/watch setup in my gruntfile is:
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
// Project configuration.
grunt.initConfig({
//live server
connect: {
server: {
options: {
port: 443,
base: 'dist', //the folder my compiled web files are generated in
protocol: 'https',
livereload: true,
debug: true, //show me what is being served, helpful for debugging
hostname: 'localhost',
open: true //auto-open browser tab - remove if annoying
}
}
},
//watch for changes and recompile / reload
watch: {
dev: {
options: {
livereload: {
port: 35729,
key: grunt.file.read('livereload.key'),
cert: grunt.file.read('livereload.crt')
// you can pass in any other options you'd like to the https server, as listed here: http://nodejs.org/api/tls.html#tls_tls_createserver_options_secureconnectionlistener
}
},
files: [ // Files to livereload on
"js/**/*.*",
"less/admin/*.less",
"./*.html",
"./Gruntfile.js",
"snippets/*.*"
],
tasks: [
'dev' //the task to run after a change is detected
]
}
},
.....
This guide helped me create the certificates:
https://www.gilluminate.com/2014/06/10/livereload-ssl-https-grunt-watch/
The :9000 detail did not work for me, I left the livereload port at 35729, and once the server was up and running hit this in a new tab to authorise access to the script using self-generated certificates:
https://localhost:35729/livereload.js?snipver=1
I hope this helps someone ;)
I'm using Protractor to implement end-to-end tests on my AngularJS app using Grunt, and my app does use proxy pass to handle API calls. As a result, when running tests, API calls fail because http://localhost:9000/api is not handled.
I tried the grunt-connect-proxy plugin to handle /api proxy pass but it simply redirects (HTTP code 301) localhost:9000/api to myserver.com/api, and doesn't mimic the behaviour of a proxy pass (and the app doesn't work either).
Here's the Gruntfile configuration:
connect: {
options: {
port: 9000,
hostname: 'localhost',
base: ['<%= globals.appFolder %>/'],
logger: 'dev',
}
},
protractor: {
options: {
configFile: 'tests/e2e/protractor.config.js',
keepAlive: true,
noColor: false,
args: {}
},
e2e: {
options: {
args: {}
}
}
}
And here's the Protractor configuration file:
exports.config = {
specs: ['./suites/*.js'],
baseUrl: 'http://localhost:9000',
maxSessions: 1,
multiCapabilities: [{
browserName: 'chrome'
}],
};
How would you handle this case to let tests run on both a desktop machine, and a remote machine (such as Jenkins)?
According to this issue related on grunt-connect-proxy, this is a bug occurring when dealing with HTTPS endpoints. Use the master/ version instead.
Package.json:
"grunt-connect-proxy": "https://github.com/drewzboto/grunt-connect-proxy#master",
Gruntfile:
proxies: [{
context: '/api',
host: 'myserver.com',
port: 443,
https: true
}]