Working on an Electron app with React. Right now, to get things started, I run the typical npm start command which runs the react-scripts start script.
This starts the dev server. Once the dev server is started, I open a second terminal window and run a script to start electron npm run start-electron which opens my React app in the Electron window.
This works as expected, but I was curious if there was a way to create a script that would:
Start the dev server
Wait for dev server to be started
Then start electron
I tried setting up a sequential script in package.json but it only starts up the dev server. For example npm run start && npm run start-electron.
This isn't make or break. The two terminal option works fine, just didn't know if this was possible.
Yes it is possible, I use concurrently to do it within my projects
npm i concurrently
and add a new script, let's call it dev for example, then in your scripts:
"dev": "concurrently \"npm run start\" \"npm run start-electron\""
All that remains to do now is npm run dev
I have the exact same situation, and below script work for me (remember to install wait-on)
"scripts": {
"start-reactjs": "PORT=25610 react-scripts start",
"start-electron": "wait-on http://localhost:25610 && electron .",
"start": "npm run start-electron & npm run start-reactjs"
}
you can create a script in the root directory with extension .sh
it could contain all operations for you
npm start
npm run start-electron
The second approach you could create a custom script in package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"customStart":"npm run start && npm run start-electron"
},
to run this script
npm run customStart
You could try start-server-and-test npm module. It has different purpose, but it could work for your scenario.
From documentation:
This command is meant to be used with NPM script commands. If you have
a "start server", and "test" script names for example, you can start
the server, wait for a url to respond, then run tests. When the test
process exits, the server is shut down.
"scripts": {
"start-server": "npm start",
"test": "mocha e2e-spec.js",
"ci": "start-server-and-test start-server http://localhost:8080 test"
}
}
To execute all tests simply run npm run ci.
Another alternative could be concurrently combined with wait-on as #Slim said
From documentation:
wait-on will wait for period of time for a file to stop growing before
triggering availability which is good for monitoring files that are
being built. Likewise wait-on will wait for period of time for other
resources to remain available before triggering success.
I solved it by using concurrently
npm i concurrently
In my package.json
"build": "concurrently \"npm run build-react\" && npm run build-jsx",
I'm using it to build an Adobe extension using react, and I need to bundle my extendscript after the react-scripts build, which would otherwise delete my .jsxbin
Related
I have a simple react parallax effect in my website and if I run npm start, it's not working and if I run nodemon, the parallex effect works perfectly fine.
Is there any reason ?
Thanks by advance
npm start is just a shortcut to run node commands. You can use npm start to run nodemon. Nodemon on the other hand monitor changes in the code so you don't have to constantly restart your server
"scripts": {
"start": "nodemon server.js"
},
Although you can write anything you want in the start script, the convention is to run your server file.
Also you don't have to use nodemon. It is just a nice to.
"scripts": {
"start": "node server.js"
},
In your case, since you are using reactjs your npm start is for the development server
How to run jest in create react app before commit? I have found couple articles but they are too complicated , without explaining what to do step by step. Could you please explain me how to make it work
You need to use husky package. Here is basic configuration (put it in package.json). It adds pre-commit hook to your git configuration.
"husky": {
"hooks": {
"pre-commit": "CI=true npm run test",
}
}
You can also consider using lint-staged to lint files which you commit. You can see full configuration here.
Maybe you can utilise some npm packages for this.
So, this is not a direct solution but you can include as many things you want instead of using git commands, shells and yml files
Install package Pre-Commit and install git-cz from npm. Using these you can make use of pre-commit and commit in package.json and desired things to them.
Now you can make use of these packages in your packages.json like below
{
"start": "node index.js",
"pre-commit": "lint-staged",
"commit": "git-cz",
"lint": "eslint . --ext .js,.jsx",
}
For example you want to run test cases then pre-commit: npm run test && lint-staged
Because in our project we needed to update documents, checking style-lint, eslint and test cases, so we were using these combination.
But you should not commit directly using git commit -m "message" but with npm run commit.
Hope, this helps.
To do locally you can just write a script which first runs the tests and pipes the exit code and decides whether to really push or not based on the exit code.
By default npm test runs in interactive mode
To exit after running the tests use CI=true
i.e. CI=true npm test
This worked for me:
npm install --save-dev pre-commit
https://www.npmjs.com/package/pre-commit
Then, in package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "CI=true react-scripts test", //<-- update
"eject": "react-scripts eject",
}
Adding CI=true runs all tests without making it interactive
Finally,
"devDependencies": {
"pre-commit": "test"
}
I have a create-react-app bootstrapped project i want to deploy on an instance. Right now there are two ways that I have tried to set up the deployment which only ends up setting the port and not the host.
My project architecture is as below
Project
- Frontend
- Backend
My main issue is that although I am able to set the port on create-react-app build I cannot set the hostname to 0.0.0.0 instead of localhost.
In create-react app i hardcoded HOST=0.0.0.0 and PORT=443 in the start script.
Other thing i tried is have a script the serves the pages on port 443. Build serves on port 443 but not on 0.0.0.0.
Create-react-app scripts
"scripts": {
"start": "HOST=0.0.0.0 PORT=443 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Basic script at the root of the project
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"client": "cd frontend && npm start",
"client-prod": "cd frontend/build && npm install -g serve && serve -s build -l 443",
"server": "cd backend && npm start",
"sass": "node-sass -w frontend/source/styles/ -o frontend/source/styles/ --recursive",
"dev": "concurrently \"npm run server\" \"npm run client\" ",
"prod": "concurrently \"npm run server\" \"npm run client-prod\" "
},
The development on localhost works fine but i need to able to serve my build pages on 0.0.0.0:443 instead of localhost
env file instead in the root of your project and set HOST=0.0.0.0 and if you also want to disable the automatic browser opening when you type yarn or npm start, you can also set BROWSER=none. Check this link for more info https://create-react-app.dev/docs/advanced-configuration/
As per the advanced configuration page for React, the HOST environment variable does not apply when you deploy (in the table, see column Production, it says Ignored).
This means that HOST is not the way to set up your deployment. HOST is only functional when doing npm start in your development PC.
When you do npm run build, you get a /build folder with all the contents of the compiled application, and you get NO HTTP server. The HTTP server for deployment you select, configure and deploy on your own. See the deployment page to understand this fully.
So, in short: HOST is only for local development & testing. In deployment, you set up your NGINX, Apache or any other server in the way that server is configured.
I'm working on a React.js project using node. I usually run the unit tests with npm test to make sure all of them pass, then I create an optimized build using npm run build. The optimized build is minimized and bundled.
Because it's a React.js project, the package.json uses the react-scripts under the hood:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"lint": "standard"
},
I'm wondering if it is possible to run the tests on the optimized build, so when I give this build to a user, the user can also run the tests to make sure everything works on his/her environment.
I'm using an earlier version of node (v8.11.4) and npm (5.6.0).
I'm deploying the create-react-app using docker on AWS ECS. I'm testing using dockerhub image that's pretty much the stock version of create-react-app. When launch the task, it's able to pull the container image, launch the docker container, however it hangs on running react-scripts start. All I can see in the container logs are:
01:51:38 npm info it worked if it ends with ok
01:51:38 npm info using npm#2.15.11
01:51:38 npm info using node#v4.7.3
01:51:42 npm info prestart test-react#0.1.0
01:51:42 npm info start test-react#0.1.0
01:51:42 > test-react#0.1.0 start /usr/src/app
01:51:42 > react-scripts start
01:52:06 Starting the development server...
It just hangs there and never finishes. However, when I manually run the docker container, everything works fine:
Starting the development server...
Compiled successfully!
The app is running at:
http://localhost:3000/
My Dockerfile is:
FROM node:4-onbuild
# Prepare app directory
RUN mkdir -p /usr/src/app
ADD . /usr/src/app
# Install dependencies
WORKDIR /usr/src/app
RUN npm install
# Build the app
RUN npm build
# Expose the app port
EXPOSE 3000
# Start the app
CMD npm start --loglevel debug
My package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Looking for advice on how to debug or if there's additional logging I can do, thanks!
I figured it out - when I created defined the container in the ECS task, I didn't allocate enough memory to the docker container so when it was starting the server it ran out of memory and froze up. I changed the settings to allocate more memory to the docker container and now everything works.