How would I go about waiting for a child process to finish before telling Node.js to continue executing code?

Question

So I am building an Electron and React App. I am using ghost-script to create imgs of certain pdf files and I want to know how I would tell Node.js to wait for the imgs to be created before bringing up the window and changing the state in the App. These imgs are being used as src for a component and when the component tries to load the img it somewhat retains a broken state because the img src doesn't exist when the state updates.

 // this is where I set the state before sending all the data to the renderer process(the front end of the App) function getStateReady(theState, event) { let pdfFiles = scanDirectory(currentDir); let pdfNames = getPdfName(pdfFiles); imageUrls = getImgName(pdfFiles); console.log(imageUrls); createImg(pdfFiles, pdfNames); switch (theState) { case 'initialState': mainWindow.webContents.on('did-finish-load', () => { mainWindow.webContents.send('initialState', pdfFiles, imageUrls); }) break; case 'secondState-reply': event.sender.send('secondState-reply', pdfFiles, imageUrls); break; default: console.log('a param was missing'); } } //these to functions take a pdf file path and its name to create an img function createImg(pdfPaths, pdfNames) { pdfNames.forEach((item, index) => { if(fs.existsSync(path.join(rootDirectory, 'src', 'imgs', item.replace('.pdf', '.jpg')))) { console.log('image exists'); } else { console.log("creating image"); child(returnProcess(pdfPaths[index], item), (err, stdout) => { if(err) { console.log(err) } console.log(stdout) }) } }) } function returnProcess(pdfPath, pdfName) { let newPdf = `"${pdfPath}"` let output = `"${path.join(rootDirectory, 'src', 'imgs', pdfName.replace('.pdf', '.jpg'))}"`; let mainProcess = `"C:\\\\Program Files\\\\gs\\\\gs9.23\\\\bin\\\\gswin64c.exe" -q -o ${output} -sDEVICE=pngalpha -dLastPage=1 ${newPdf}` return mainProcess; } 

Answer 1

I am not completely sure with code and logic and I have never worked with ghost-script but what I can suggest here to solve this issue is use a call back function. basically pass a callback function to createImg method and execute the callback function which will tell the NodeJS that process is done and front-end should able to display the created image.

Below is the update code.

 // this is where I set the state before sending all the data to the renderer process(the front end of the App) function getStateReady(theState, event) { let pdfFiles = scanDirectory(currentDir); let pdfNames = getPdfName(pdfFiles); imageUrls = getImgName(pdfFiles); console.log(imageUrls); createImg(pdfFiles, pdfNames, function (){ switch (theState) { case 'initialState': mainWindow.webContents.on('did-finish-load', () => { mainWindow.webContents.send('initialState', pdfFiles, imageUrls); }) break; case 'secondState-reply': event.sender.send('secondState-reply', pdfFiles, imageUrls); break; default: console.log('a param was missing'); } }); } //these to functions take a pdf file path and its name to create an img function createImg(pdfPaths, pdfNames, fun) { pdfNames.forEach((item, index) => { if(fs.existsSync(path.join(rootDirectory, 'src', 'imgs', item.replace('.pdf', '.jpg')))) { console.log('image exists'); } else { console.log("creating image"); child(returnProcess(pdfPaths[index], item), (err, stdout) => { if(err) { console.log(err) } console.log(stdout) }) } }) // call the callback function fun.call(); } function returnProcess(pdfPath, pdfName) { let newPdf = `"${pdfPath}"` let output = `"${path.join(rootDirectory, 'src', 'imgs', pdfName.replace('.pdf', '.jpg'))}"`; let mainProcess = `"C:\\\\Program Files\\\\gs\\\\gs9.23\\\\bin\\\\gswin64c.exe" -q -o ${output} -sDEVICE=pngalpha -dLastPage=1 ${newPdf}` return mainProcess; }