-2

I want to deploy my react app to Digital Ocean using Github, before Digital Ocean runs 'Npm Run Build' I want It to modify a css file In the node modules folder.

If you might be wondering, why I wanna do that Just before the build, because It gives an error when It starts the build, there Is a syntax error In that css file In node modules folder which stop the build process.

Andriken sonwane
  • 383
  • 1
  • 5
  • 14

2 Answers2

0

I am assuming you have to perform this action before start of every build, If this is not the case you can manully update the file once.

An easy solution would be define a custom script in any scipting language, which modifies the required file in modules directory

and just update build key inside Package.json something to be like

"scripts": {
    "build": "./modifyPackage.sh && react-scripts build"
}

Here is the example bat script which will replace text with "table{display:none;}" on line 2

You can try this by running script.bat in your command promt

src.css

html{color: red;}
body{overflow: auto;}
h1{margin:0;}
h2{margin:0;}
h3{margin:0;}

script.bat

@echo off
set file=src.css

call :replaceLine "%file%" 2 "table{display:none;}"

type "%file%"
pause
exit /b

:replaceLine <fileName> <changeLine> <stringResult>
setlocal enableDelayedExpansion

set /a lineCount=%~2-1

for /f %%G in (%~1) do (
    if !lineCount! equ 0 pause & goto :changeLine
    echo %%G>>temp.txt
    set /a lineCount-=1
)

:changeLine
echo %~3>>temp.txt

for /f "skip=%~2" %%G in (%~1) do (
    echo %%G>>temp.txt
)

type temp.txt>%~1
del /f /q temp.txt

endlocal

exit /b
Osama Malik
  • 267
  • 2
  • 6
  • Just once, and can you give me a code as a demo, so that I can just replace the css file, or code In that mention file that needs to be modified, because I don't know how to write the script and also tell me the location for that script.sh, Thank you. – Andriken sonwane Apr 26 '22 at 09:45
  • I will update my answer to give an example script – Osama Malik Apr 26 '22 at 10:33
  • great Thank you writing the code, I appreciate It from the heart, but I don't understand, where should I point out and describe location of the file In node modules folder, so that the script can replace the file or all contents of that file, also tell me where should I place the script.bat – Andriken sonwane Apr 26 '22 at 11:10
  • You have to put script on root of project besides package.json file and you can set the path of file using, `set file=%~dp0node_modules\bootstrap\scss\temp.scss` This code just replaces one line if you want to replace you can take a look at [https://stackoverflow.com/questions/23075953/batch-script-to-find-and-replace-a-string-in-text-file-without-creating-an-extra]how to replace content in batch – Osama Malik Apr 26 '22 at 12:26
-1

there is this tool called patch-package which probably can help you with this.

it requires the following steps (as described in it's documentation):

  1. add a post install script to package.json
  "scripts": {
    ...
    "postinstall": "patch-package"
  },

  1. install patch package npm i patch-package

  2. go in your node_modules folder find the package and file in it that you want to update

for example i'm setting number of retries for mongodb package default which is 5 to 10 here

class Cursor extends CoreCursor {
  constructor(topology, ns, cmd, options) {
    super(topology, ns, cmd, options);
    if (this.operation) {
      options = this.operation.options;
    }

    // part i modified
    const numberOfRetries = options.numberOfRetries || 10;
    const tailableRetryInterval = options.tailableRetryInterval || 500;
    const currentNumberOfRetries = numberOfRetries;
    //...
  }
  // 
...
}
  1. let patch package create a patch folder with the applied changes via npx patch-package mongodb

the output will look like this

> npx patch-package mongodb 
patch-package 6.4.7
• Creating temporary folder
• Installing mongodb@3.7.3 with npm
• Diffing your files with clean files
✔ Created file patches/mongodb+3.7.3.patch

 mongodb is on GitHub! To draft an issue based on your patch run

    npx patch-package mongodb --create-issue

and it will create a patches folder with a file mongodb+3.7.3.patch

with contents like this

diff --git a/node_modules/mongodb/lib/cursor.js b/node_modules/mongodb/lib/cursor.js
index 63f5fb7..4f71085 100644
--- a/node_modules/mongodb/lib/cursor.js
+++ b/node_modules/mongodb/lib/cursor.js
@@ -108,7 +108,7 @@ class Cursor extends CoreCursor {
     }
 
     // Tailable cursor options
-    const numberOfRetries = options.numberOfRetries || 5;
+    const numberOfRetries = options.numberOfRetries || 10;
     const tailableRetryInterval = options.tailableRetryInterval || 500;
     const currentNumberOfRetries = numberOfRetries;

that should be it now when you build your code will use the package with the updates applied to it.

HenriDev
  • 587
  • 7
  • 13