We Keep Coding

My node.js Server is running successfully in heroku but build failed.( Timeout running buildpack)

enter image description here
I have attached all the environment variables at heroku and pulled the code from github. After that i have tried to deploy the app. It run’s well but build fails. (Github project link -> https://github.com/shubhamGhosh-dev/OAuth-messaging-server)

After two days of struggle, I found the issue. Which is just a script ("build" : "node index.js") in package.json file.
After removing "build" : "node index.js", the app is deployed successfully. But still curious for this behaviour.

How do I automatically run an NPM script after webpack dev server has been started?

I'm doing a Vue project that runs on Electron. Since Vue uses webpack dev server to run the Vue app in development mode, I need to launch Electron with the dev server URL right after compilation completes and dev server has been started. Right after this.
I know I can manually run Electron after this but I need this task to be automated. My only purpose for this is to get Vue devtools running on Electron. Vue devtools won't work even if I set writeToDisk: true and open up the index.html on Electron. It only seems to work over the dev server (Issue seems to be file:// protocol). I found out that It's possible to open a browser after the server has started. But can't run any custom scripts.
So what I want is to automatically run cross-env NODE_ENV=development electron dist/main.js after I run serve Vue task and the dev server has been started. (I also know that this feature is already implemented in vue-cli-plugin-electron-builder but I'm avoiding all these plugins for multiple reasons)

You can prepend pre and post to npm scripts, and npm will figure out what you want. Because serve probably runs in the foreground, a postserve would normally not work, but you can get around that by using &. This won't wait for any build steps to complete, but if it's a requirement to have it wait, you could throw a short sleep in as well.
"serve": "my serve command &",
"postserve": "cross-env NODE_ENV=development electron dist/main.js"
// or with a sleep
"postserve": "sleep 5 && cross-env NODE_ENV=development electron dist/main.js"

This is how I ended up doing it and managed to create a build tool called Vuelectro.
I had to do it programmatically using the #vue/cli-service module and manually start the serve process where I could run electron once the webpack dev server was started.
const vueService = require('#vue/cli-service');
const service = new vueService(process.cwd());
function serveDev() {
service.init("development");
service.run('serve').then(({server, url}) => {
let electron = spawn(path.join(process.cwd(), 'node_modules', '.bin', process.platform === 'win32' ? 'electron.cmd' : 'electron'), ['app/electron-main.js'], {stdio: 'inherit'});
electron.on('exit', function (code) {
process.exit(0);
});
}).catch((err) => {
console.error(err.stack);
});
}
Complete source code can be found here.

Deploying app to google app engine and want to start api and client

Following this tutorial to get an api and client on google cloud platform:
https://www.freecodecamp.org/news/create-a-react-frontend-a-node-express-backend-and-connect-them-together-c5798926047c/
I have a root dir with an /api and /client inside it
the /api package.json has the following script
"scripts": {
"start": "node ./bin/www"
},
the /client package.json has the following script
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
When I try to deploy it says:
Step #0: Application detection failed: Error: node.js checker: Neither
"start" in the "scripts" section of "package.json" nor the "server.js"
file were found. Finished Step #0
I'm thinking it can't find the scripts? What is the best approach to start my api and client at the same time when I deploy?

My supposition is that the reported problem is generated by the fact that in root directory there is no package.json file. You could try to add one in root directory to handle stuff in app and client directories, but...
... but a taken a look to the tutorial you used and I found some things I don't like, so you want to give you some suggestions. I recently developed a simple tool to visualize charts about covid-19 diffusion in Italy, it uses same structure as your app with different approaches. The main difference is I deploy it in a VPS and I use external tool to launch it so in my package.json file there is not the script command to launch it in prod. It is something like:
cd client && npm install && npm run build && cd .. && npm install && node server.js
You can take a look to github repos to get ideas, but I'm going to explain the main differences.
server stuff (with package.json) is in root directory (simply this could solve your problem)
as per other answers, you need to add two lines to your express app to serve the built client as static files:
I suggest to use proxy features rather than cors package.
In your express app:
// At the begenning, with other middlewares
app.use(express.static(path.join(__dirname, "client", "build")));
// As last, to substitute any 404 with your client home page
app.get("*", (req, res) => res.sendFile(path.join(__dirname, "client", "build", "index.html")));
I don't know which kind of data you are going to treat, but CORS is a sort of protection you should never disable (by cors package), at least as it is possible. More than this, once you'll be able to solve the reported problem, I'm afraid that following part from the tutorial you used will not work, as it will try to fetch APIs from your app users's localhost:9000.
callAPI() {
fetch("http://localhost:9000/testAPI")
.then(res => res.text())
.then(res => this.setState({ apiResponse: res }));
}
To both enable CORS and solve fetching from localhost problem you should use proxy feature. In your client package.json file just add:
"proxy": "http://localhost:9000/",
This makes your webpack dev server to proxy calls it can't handle to your dev server, than changing your client fetching function to:
callAPI() {
fetch("/testAPI")
.then(res => res.text())
.then(res => this.setState({ apiResponse: res }));
}
it will automagically works both in dev and prod envs and let you to enable back CORS.
Hope this helps.

Well in that tutorial that guy creates the react app using create-react-app and because of that I don't know why you have in the 'start' command in your second package.json the following command 'node server.js'. You should have "start": "react-scripts start", that won't fix your problem but I'm not sure if server.js another server or what.
Anyway I'll try to help you, first 'create-react-app' creates an app which internally uses webpack-dev-server which is cool for developing, but in order to deploy your app you need to run this command
npm run build
After that you will have a folder called 'build' with your react app. Then you need to copy that folder and go to your server project and paste the
'build' folder there. Once you finish that you need to add the following code to tell your server that you want to serve static files
app.use(express.static(path.join(__dirname, 'build')));
And you also need to add the route
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
Now you can test it locally running only your server and the '/' path should take you to the react app. Once you know that is working, you can deploy ONLY that server with the build folder and just one package.json to google app engine.
I hope helped you!

Service Worker not working with create-react-app

I'm using create-react-app for generating a react.js project. It automatically implements a service-worker for progressive web app funtionality if a production build was made by using the command npm run build.
Two weeks ago everything worked fine and I was able to cache all files with the generated service-worker. But since today I always get errors:
On Chrome: Uncaught (in promise) Error: Request for http://localhost:5000/index.html?_sw-precache=aee80fca0f83208cc4d82ae2ccfda3c1 returned a response with status 301 at service-worker.js:1.
On Firefox: Service worker event waitUntil() was passed a promise that rejected with 'TypeError: NetworkError when attempting to fetch resource.'.
I have absolutely not idea why the error occurs.
Even if I create a new app and don't touch any of the generated files, the error shows up in the browsers console.
Steps to reproduce:
npx create-react-app my-app
cd my-app
npm run build
serve -s build
open app in browser
I tested it on two separate machines but get the same result. Any help is very appreciated.
Edit:
Console output after running npm run build:
C:PATH-TO-PROJECT>npm run build
> frontend#0.1.0 build C:\xampp\htdocs\gitlab\BA\App-PWA-progetraenke.app\frontend
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
164.04 KB build\static\js\main.d2519277.js
781 B build\static\css\main.77261875.css
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
serve -s build
Find out more about deployment here:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment

I had the same issue with a VueJS app I created by using the PWA template of Vue. What did the trick for me was updating to the latest version of vue-cli and serve.
Updating to the latest serve version (8.1.4) probably solved my problem.

Debuging expressjs server alongside electron

I've successfully running expressjs server alongside electron as described on here:
Run Node.js server file automatically after launching Electron App
The problem now, there is no output from command line related to server activity. I simply run
electron .
on project directory, then no other output related to the server.
Is there any way to get that server activity logged onto cli as normally I run with (like just) node server.js ??

Perhaps you can try using the node module concurrently. This will allow you to run two commands at once and is used commonly in development with electron.
Instead of getting the server and electron to run from within the same file, separate it into a server file and an electron file. For example, one of my main development techniques is this:
concurrently "npm run server" "npm run start-app"
Which runs my hot-reload server, that my electron app connects to in development mode.
By using concurrently you can see the output of each process as well.
A good example of this technique in practice is with the electron-react-boilerplate repository. If you're interesting in this style of development I recommend you clone that repository and give npm run dev a try, to see how their development process works (whether you're using React or not).