I have tried using Nx in an attempt to make use of Monorepos. I have been facing an issue to serve multiple apps via nx run-many command. Can anyone correct me if I'm doing something wrong?
Command used: nx run-many --target=serve --all
I can see the Nx Console logging all the available apps but only running one
> NX Running target serve for projects:
- app1
- app2
———————————————————————————————————————————————
> nx run app1:serve
Try this:
nx run-many --parallel --target=serve --projects=frontend,backend
This happens due to port overriding, if you have multiple frontend apps for example they will run on the same port.
You can manage every project configuration in project.json file, and there you can handle different port for every project.
example:
"serve": {
"executor": "#nrwl/web:dev-server",
"options": {
"buildTarget": "react-todo:build",
"hmr": true,
"port": 3001
},
"configurations": {
"production": {
"buildTarget": "react-todo:build:production",
"hmr": false
}
}
},
this is a react config in (apps/<Your_Project_Name>/project.json)
nx run-many --target=serve --all --maxParallel=100
The default value for --maxParallel is three, it means runs tasks in batches of three by default.
Additional, Exclude few apps to not serve then.
nx run-many --target=serve --all --maxParallel=100 --exclude=app-name
Github
Update solution in 9/2022.
go to package.json adding this script that allow us to run many project with only one command
"all": "npx nx run-many --target=serve --all --maxParallel=100"
inside apps folder, there are several application, and go to their package.json, and edit `targets -> serve -> options like this sample
"options": {
"buildTarget": "your app name:build",
"hmr": true,
"port": 4201 // adding this
},
You can change the serving port by editing package.json
"serve": {
"executor": "#nrwl/web:dev-server",
"options": {
"buildTarget": "admin-web:build",
"port": 4220,
"hmr": true
},
"configurations": {
"production": {
"buildTarget": "admin-web:build:production",
"hmr": false
}
}
}
After that you can run nx run-many
nx run-many --parallel --target=serve --projects=frontend,backend
For now, Remix uses a hardcoded 8002 port for file watcher. When running two or more remix apps at once, either one of the apps (which was started later) would have an error accessing the file server port.
To override, add a .env or .env.local file in your respective app directory and add the environment variable REMIX_DEV_SERVER_WS_PORT.
apps/
- app1
.env.local -> REMIX_DEV_SERVER_WS_PORT=8003
- app2
.env.local -> REMIX_DEV_SERVER_WS_PORT=8004
This worked for me.
Related
Every time I install a new dependency with npm it's like cutting the read wire and hoping the bomb doesn't go off.
This error keeps coming up now:
[BABEL] React Refresh Babel transform should only be enabled in
development environment. Instead, the environment is: "dev_local". If
you want to override this check, pass {skipEnvCheck: true} as plugin
options.
It's a Gatsby app and I can't figure out how or where to achieve {skipEnvCheck: true} I've tried various things in gatsby-node.js such as:
exports.onCreateWebpackConfig = ({ actions, plugins }) => {
actions.setWebpackConfig({
plugins: [
plugins.define({
skipEnvCheck: true,
}),
],
});
};
But it doesn't help. I have different development .env configs (e.g. this "dev_local" environment) for testing with different settings and I want to keep doing that.
Or am I just chasing ghosts here and really there is some other problem with the dependencies?
I ran into the same error when attempting to deploy a Gatsby app to Heroku. A frustrating rabbit hole ensued, but I eventually narrowed the fix down to using gatsby serve instead of the default gatsby develop for the start script.
In package.json:
"scripts": {
"start": "gatsby serve --port $PORT --host 0.0.0.0",
"build": "gatsby build",
...
},
I have an amplify react application with two environments so far: prod and staging.
Then I have my .env.staging and .env.production files with different values for an API URL.
Therefore, in my package.json I have the following scripts ready for the deployment:
"build": "react-scripts build",
"build:staging": "env-cmd -f .env.staging react-scripts build",
Now the problem comes as I don't know how to make amplify publish command to run one or the other depending on the environment.
No matter which amplify env checkout I choose, the configuration used on the 'publish' command is shared in the 'project-config.json', and it looks like the following:
{
"projectName": "whatever",
"version": "3.0",
"frontend": "javascript",
"javascript": {
"framework": "react",
"config": {
"SourceDir": "src",
"DistributionDir": "build",
"BuildCommand": "npm.cmd run-script build",
"StartCommand": "npm.cmd run-script start"
}
},
"providers": [
"awscloudformation"
]
}
Is there any way to achieve what I'm looking for?
Thanks for your help in advance.
I understand this question was asked almost 1 year ago now, but i encountered this same problem this morning and would like to offer my solution to the problem.
Currently (asof 04/03/22) there is still no official solution to the problem and as such, you will be required to edit your build script to build your content based on the environment dynamically.
The way we have currently implemented this is by creating a build JS script in our root (named build-env.script.js) containing the following code:
#! /usr/bin/env node
(function() {
// bring in child_process to use spawn command
const cp = require('child_process');
// bring in the amplify local-env-info.json to see current environment
const buildInfo = require('./amplify/.config/local-env-info.json');
// spawn the build command based on the env name:
// npm run build-production on prod or npm run build-staging on staging
const cmd = cp.spawn(`npm run build-${buildInfo.envName}`, { shell: true });
// echo output of the commands to the console
cmd.on('spawn', () => console.log('Running build command for:', buildInfo.envName));
cmd.stdout.on('data', (d) => console.log(d.toString()));
cmd.stderr.on('data', (d) => console.log(d.toString()));
cmd.on('exit', () => console.log('Build Completed'));
})();
As a sidenote, the JSON file in question is created by amplify and therefore can be determined as a source of truth when it comes to looking for the current environment name, my file for example looks like this:
{
"projectPath": "path/to/project/frontent",
"defaultEditor": "vscode",
"envName": "production"
}
Whilst my package.json looks like this:
{
...
"scripts": {
...
"build": "node ./build-env.script.js",
"build-staging": "ng build --configuration staging",
"build-production": "ng build --configuration production"
}
}
However you will need to modify the env names and scripts accordingly (as our project is an angular project.
I have built an application using the create-react-app version 2.0 locally. It runs, builds and works as expected. I am trying to deploy it to Zeit, using now. It works fine when I run the now command from withing the generated ./build folder (npm run build's destination).
My goal is to integrate it with GitHub so it updates the deployment on git push. Unfortunately, running now at the project's root folder doesn't work. I have a now.json file with the following contents:
{
"version": 2,
"name": "somename",
"builds": [
{
"src": "package.json",
"use": "#now/static-build"
}
],
"routes": [
{
"src": "^/static/(.*)",
"dest": "/static/$1"
},
{
"src": ".*",
"dest": "/index.html"
}
]
}
and my package.json contains the "now-build": "serve --single ./build" script.
The error
Every build attempt from the root folder results to this error:
Tries
I have tried changing the now-build to now-start and it didn't work, as it specifically needs now-build, I have tried removing the now.json altogether and it didn't work and every YouTube video I found on the issue doesn't do anything different but it works for them.
Any ideas?!
It turns out that the build command is wrong. The correct one is:
"now-build": "npm run build && mv build dist" in the package.json.
More info: https://github.com/zeit/now-examples/tree/master/create-react-app
I am using nextjs framework and as UI framework I have chosen semantic-ui accompanied with semantic-ui-react.
The main reason for me choosing semantic-ui is the theming power of the framework.
I have installed the full package of semantic-ui as it being showed here.
`
semantic.json file has the following:
{
"base": "/client/static/semantic",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "dist/",
"uncompressed": "dist/components/",
"compressed": "dist/components/",
"themes": "dist/themes/"
},
"clean": "dist/"
},
"permission": false,
"autoInstall": false,
"rtl": false,
"components": [blah blah],
"version": "2.2.10"
}
Theming is working properly on localhost.
The problem is the following: when trying to deploy usin now dependencies are being installed and semantic-ui feels like it is not there. That means there is no styling at all.
I am including semantic folder to my project (meaning, I am now gitignoring the /client/static/semantic folder).
What is the right way to deploy using Nextjs and semantic-ui?
**UPDATE:
Found where the problem comes from but still dont know how to solve it.
So the proccess goes like that when you theme your semantic-ui.
You install semantic-ui .
semantic-ui looks for the file semantic.json and knows you are theming.
Files and folder for theming are being created BUT not build. That means in order for the compoments of semantic-ui to be build it is needed to navigate to the specific semantic folder and run gulp build.
The problem is now dont know how to do this.
Any ideas?
So to close this with an answer from the comments.
In order to get pre-builds such as gulp/grunt/etc before the actual next build you have to create a script which does what you want.
Example:
// package.json
{
"scripts": {
"build": "gulp build && next build",
"start": "next start"
}
}
and just run npm run build to have your building process started.
I'm using lite server for developing my Angular projects. It depends on and uses BrowserSync to do most of the work (serving the site to localhost, live reload etc).
Currently, I have a config file bs-config.json in my root for this module:
{
"injectChanges": true,
"files": ["./**/*.{html,css,js,png,jpg,svg,gif}"],
"watchOptions": {
"ignored": [
"node_modules",
"src/**/*.*",
"app/**/*.js"
]
}
}
Then in my package.json I have a script to execute it, referring to the config file:
{
"version": "1.0.0",
"scripts": {
"dev": "lite-server -c bs-config.json"
},
"devDependencies": {
"lite-server": "~2.2.0"
}
}
Works great. But ideally I don't want a config file in the root of my project that isn't used in production. Is it possibly to extend the script in my package.json to execute the config inline with the command?
Unfortunately, its not possible to extend the dev script in your package.json to execute the config inline when using lite-server.
If you don't want a config file in the root of your project, you would simply place it elsewhere in your project (i.e., in a folder called configs) and provide a custom path to your config file via -c or --config run time options. So your dev script will be "lite-server -c configs/bs-config.json".
Check out this GitHub issue: Command line arguments no longer supported?