Run powershell script in react on build action in package.json

09/10/2020 12:45
Here is an example which creates copy of index.html file from build folder (created by npm run build from index.html in public folder) and replaces server paths to enable open file in browser from file system.
After running npm run build, postbuild action is called, our powershell is executed and there is index_local.html file which can be opened in browser.
 
1. create powershell script in react app root folder
2. update scripts property in package.json file
 
2.1. add "copy-local-index" or whatever name for your powershell node and assign powershell script
2.2 add "postbuild" node to scripts and assign npm run copy-local-index or your name of powershell node
 
 
 package.json content
 ====================
 ...
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "copy-local-index": "powershell.exe -noexit .\\createLocalIndexHtml.ps1",
    "postbuild": "npm run copy-local-index"
  },
  
createLocalIndexHtml.ps1
========================  
  
  $indexPath = "build\index.html"
$indexNewPath = "build\index_local.html"
$indexHtml = Get-ChildItem $indexPath
 
if ($null -ne $indexHtml) {
    write-host "Creating copy of '$($indexPath)' as $($indexNewPath)..."-ForegroundColor Yellow -NoNewline;
    Copy-Item -Path $indexPath -Destination $indexNewPath -Force
    (Get-Content $indexNewPath) -replace '/static', 'static' | Set-Content $indexNewPath 
    (Get-Content $indexNewPath) -replace '/favicon', 'favicon' | Set-Content $indexNewPath 
    write-host " Done" -ForegroundColor Green
}
}Here is an example which creates copy of index.html file from build folder (created by npm run build from index.html in public folder) and replaces server paths to enable open file in browser from file system.
After running npm run build, postbuild action is called, our powershell is executed and there is index_local.html file which can be opened in browser.
 
1. create powershell script in react app root folder
2. update scripts property in package.json file
 
2.1. add "copy-local-index" or whatever name for your powershell node and assign powershell script
2.2 add "postbuild" node to scripts and assign npm run copy-local-index or your name of powershell node
 
 
 package.json content
 ====================
 ...
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "copy-local-index": "powershell.exe -noexit .\\createLocalIndexHtml.ps1",
    "postbuild": "npm run copy-local-index"
  },
  
createLocalIndexHtml.ps1
========================  
  
  $indexPath = "build\index.html"
$indexNewPath = "build\index_local.html"
$indexHtml = Get-ChildItem $indexPath
 
if ($null -ne $indexHtml) {
    write-host "Creating copy of '$($indexPath)' as $($indexNewPath)..."-ForegroundColor Yellow -NoNewline;
    Copy-Item -Path $indexPath -Destination $indexNewPath -Force
    (Get-Content $indexNewPath) -replace '/static', 'static' | Set-Content $indexNewPath 
    (Get-Content $indexNewPath) -replace '/favicon', 'favicon' | Set-Content $indexNewPath 
    write-host " Done" -ForegroundColor Green
}