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?
Related
I inherited a react project that was working on my last computer. But now it can't build on my new computer. Specifically, I forgot how to get the npm start command to know where the project directory is.
For example, let's say I have the following two files:
// src/template/Page.js
import LoginComponent from 'component/Login.js'
// src/component/Login.js
export default function Gallery() { return <div></div>;}
Then when I run npm start, I get the error:
Module not found: Can't resolve 'component/Login.js' in 'src/template/Page.js'
I vaguely remember that on my last computer, I used some hidden file, or possibly the .env file to tell npm to look for all react components under the src/ directory, such that the term src/ can be omitted from all the import statements in the code.
Does anyone know how to tell react or npm to always import components without always spelling out the src/ prefix?
NOTE:
I also see a .vscode directory with these files:
// .vscode/settings.json
{
"editor.snippetSuggestions": "top",
"files.associations": {
"*.js": "javascriptreact"
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.organizeImports": false
},
"compilerOptions": {
"baseUrl": "src"
}
}
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}/src"
}
]
}
I think these files might be related to my solution last time I got this working
In my package.json, I see these lines:
...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
...
Also, my package.json says I'm using "react": "^16.6.1" and my npm -v shows 5.5.1. I don't remember what npm version I was using on my last computer. So not sure if that would matter.
You need a jsconfig.json to configure absolute imports (if you were using TypeScript, you would instead use tsconfig.json). This file is vital to your project working correctly, so you should commit this to source control so you don't have to remake it on each machine:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
I did not know Create React App supported this, I learned something today from your question. Thanks!
Finally got it work. I added this line to my .env file:
NODE_PATH=src
And then everything worked. Taken from documentation here: https://nodejs.org/api/modules.html
If the NODE_PATH environment variable is set to a colon-delimited list
of absolute paths, then Node.js will search those paths for modules if
they are not found elsewhere.
On Windows, NODE_PATH is delimited by semicolons (;) instead of
colons.
NODE_PATH was originally created to support loading modules from
varying paths before the current module resolution algorithm was
defined.
NODE_PATH is still supported, but is less necessary now that the
Node.js ecosystem has settled on a convention for locating dependent
modules. Sometimes deployments that rely on NODE_PATH show surprising
behavior when people are unaware that NODE_PATH must be set. Sometimes
a module's dependencies change, causing a different version (or even a
different module) to be loaded as the NODE_PATH is searched.
Additionally, Node.js will search in the following list of
GLOBAL_FOLDERS:
1: $HOME/.node_modules
2: $HOME/.node_libraries
3: $PREFIX/lib/node
Where $HOME is the user's home directory, and $PREFIX is the Node.js
configured node_prefix.
These are mostly for historic reasons.
It is strongly encouraged to place dependencies in the local
node_modules folder. These will be loaded faster, and more reliably.
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.
I have used electron builder to create a windows installer. When I install the app, it does not work as one of the JS files is not being found. The file exists in the build/ folder, and the build folder is included in the electron build. It does not find it as it is looking for the file on the C:\ drive, instead of in the installed directory. See screenshot. It looks like the path is not being set for JS files that exist in the root of the build folder.
I have these settings in my package.json file:
"homepage": "./",
"build": {
"appId": "nonExistentID",
"files": [
"build/**/*",
"node_modules/**/*",
"./src/Main.js"
],
"directories": {
"buildResources": "assets"
},
"extends": null
},
Screenshot from Chrome
I'm using craco and craco-alias to implement aliases for imports in my Create React App project.
Followed instructions in https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation and https://github.com/risenforces/craco-alias#readme
I configured package.json to use craco instead of react-scripts for starting dev server, tests and production build
...
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"lint:css": "stylelint './src/**/*.css'",
"lint:js": "eslint 'src/**/*.js'",
"test:w": "craco test --watch",
"postinstall": "patch-package"
},
...
Then I created jsconfig.json file w aliases paths
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"#components": ["components/*", "components"],
"#constants": ["constants/*", "constants"],
"#assets": ["assets/*", "assets"],
"#store": ["store/*", "store"],
"#utils": ["utils/*", "utils"]
},
"include": ["src"],
"exclude": ["node_modules", "build", "coverage"]
}
And craco.config.js file, which uses craco-alias plugin
/* craco.config.js */
const CracoAlias = require('craco-alias');
module.exports = {
plugins: [
{
plugin: CracoAlias,
options: {
baseUrl: './src',
source: 'jsconfig',
}
}
]
}
Now I'm using aliases for imports in my app like this
// root index.js file
...
import Layout from '#components/Layout';
import store from '#store'; // this line causes error on CI build
function App() {
return (
<Layout>
/* inner components */
</Layout>
);
}
Everything works fine (aliased imports works on dev-server, in jest tests and even if I serve locally built project) until I push it to github repo. That repo has configured github actions to build and test project on remote server and it fails with error on build step, after installing all packages.
Run yarn build
yarn run v1.22.4
$ craco build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Failed to compile.
./src/index.js
Cannot find module: '#store'. Make sure this package is installed.
You can install this package by running: npm install #store.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
##[error]Process completed with exit code 1.
Could somebody help me understand what wrong with my code? Why craco or webpack expect '#store' to be external package instead of aliased import of internal module?
In my case problem wasn't in craco or webpack, but in my previous actions and OS filesystem differences. I'm using Windows 10 and WSL in VS Code terminal. So before I use '#' symbol for aliases I tried to use CamelCase for my folders and renamed it via windows explorer (because for me it was simpler to close VSCode and rename files via explorer than to open new bash terminal in new VSCode window after closing opened files).
Then I prefer to use '#' symbol and rename folders back to lowercase. I configured aliases and pushed changes to remote github repo, where CI actions were run. When CI was running actions it can't find 'store' folder (because previously I renamed it to 'Store' and it was last saved path to folder in git), so it tried to find external package named 'store'.
To fix this I change git config to stop ignoring namecasing for my folder by running command git config core.ignorecase false. Git history was updated, I push it to remote repo and CI actions succeeded.
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