1

I am currently building multiple react apps and it'd be awesome to be able to continously deploy them from a github repo to a dev domain for the clients to be able to access them. I was able to setup a webhook through GitHub Actions whenever I merge pull requests to the master branch so that Plesk pulls the current code and deploys it. Now I thought I could simply add two additional deployment actions to the git repo settings in plesk to get it to work:


    /opt/plesk/node/17/bin/npm install &> npm-install.log
    /opt/plesk/node/17/bin/npm run build &> npm-build.log

The first would obviously install NPM dependencies and the second would build a production bundle in the /build folder (both outputs were logged). I then setup a very simple .htaccess file to redirect traffic into that subdirectory (I was told this would be the easiest way to make routing work as well).


    RewriteEngine on
    RewriteCond %{REQUEST_URI} !build/
    RewriteRule (.*) /build/$1 [L]

Everything works like a charm, when I install dependencies on my local machine and upload them manually. Installing dependencies through Plesk works as well. Somehow, I can't get my system to build a production bundle though. The build log is as follows:


    > testing@0.1.0 build
    > react-scripts build
    
    /var/www/vhosts/VIRTUALHOST/ROOTDIRECTORY/node_modules/universalify/index.js:15
      }, 'name', { value: fn.name })
                             ^
    
    TypeError: Cannot read property 'name' of undefined
        at exports.fromCallback (/var/www/vhosts/VIRTUALHOST/ROOTDIRECTORY/node_modules/universalify/index.js:15:26)
        at Object.<anonymous> (/var/www/vhosts/VIRTUALHOST/ROOTDIRECTORY/node_modules/fs-extra/lib/fs/index.js:57:27)
        at Module._compile (module.js:652:30)
        at Object.Module._extensions..js (module.js:663:10)
        at Module.load (module.js:565:32)
        at tryModuleLoad (module.js:505:12)
        at Function.Module._load (module.js:497:3)
        at Module.require (module.js:596:17)
        at require (internal/module.js:11:18)
        at Object.<anonymous> (/var/www/vhosts/VIRTUALHOST/ROOTDIRECTORY/node_modules/fs-extra/lib/index.js:5:6)

I then tried to run the build process through SSH, same outcome. Multiple different NPM/Node Versions, same outcome. I have been googling for an hour now without any luck but it'd really be worth it for me cause I see myself using that CI/CD Workflow a lot more often in the future if I can somehow get it to work.

If anyone has any different recommendations for CI/CD Workflows or thinks that my idea is not best practice, I am eager to learn!

Thanks for the feedback

Edit 1

So I was able to get it to work over SSH by installing nvm. Problem is that somehow the deployment actions still don't use the correct version (the user that is being used to perform these actions is the same I am logged in through SSH but it's using a different NPM and node version nonetheless). I am starting to get annoyed cause I simply don't understand what's wrong! :D

System Specs:

OS Release
NAME="Ubuntu"
VERSION="18.04.6 LTS (Bionic Beaver)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 18.04.6 LTS"
VERSION_ID="18.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=bionic
UBUNTU_CODENAME=bionic

Plesk Version
18.0.41 Ubuntu 18.04 1800220207.23

Node Version
v17.7.2 (but tested on several other Versions as well)

NPM Version
8.5.2

Core bootstrapped with create-react-app (5.0.0).

torek
  • 448,244
  • 59
  • 642
  • 775
Timothy Oesch
  • 11
  • 2

1 Answers1

0

After having thought about it, I thought that maybe writing a custom build script that sourced the user's .bashrc file again would work and... voilà!

So to reiterate, my workflow is as follows (still open for suggestions): I push commits to my GitHub Repo, I merge the development branch to my master, as soon as the pull request is merged, a GitHub Action triggers a webhook setup by my Plesk Server, which in turn pulls all code changes, installs all requried dependencies and builds a production package. My domain points to the base directory, but a .htaccess file (provided above) redirects all requests into the build directory.

Hope this is helpful to someone.

Timothy Oesch
  • 11
  • 2