Sage11 development on EC2 instance

sage
, ,
1

Hi everyone!

Our agency leverages an EC2 instance (using ServerPilot for server & application management) and Cloud9 IDE for our WordPress development, instead of local development.

I wonder if anyone here has experience with getting Vite to work with a similar format? I have no trouble running vite with HMR on my local machine, but it would be great to get this to work on EC2 as well. (Or I use this as a reason to finally force my colleagues to work locally :imp:)

I have spent a few hours perusing the Vite server documentation (as will as Chat-GPT), but have not made much progress.

Without making any changes (except for updating the base), this is the output I get in the dev console - that vite is trying to GET from local:

GET http://127.0.0.1:5173/app/themes/sage-new/public/build/resources/css/app.css net::ERR_CONNECTION_REFUSED
GET http://127.0.0.1:5173/app/themes/sage-new/public/build/@vite/client net::ERR_CONNECTION_REFUSED
GET http://127.0.0.1:5173/app/themes/sage-new/public/build/resources/js/app.js net::ERR_CONNECTION_REFUSED

I’ve also added custom server: {} options, but no progress has been made.

Any nudge in the right direction would be greatly appreciated.

Thanks,
Alex

2

Hi, this is a temporary solution, but simply setting refresh: false, in vite.config.js fixed the error. This is of course disabled hot module replacement, but at least solves our issues for now.

However, if anyone knows how to get hmr to run non-locally, then please share. Thanks!

Thanks,
Alex

2 Likes
3

Updating my previous answer, as updating the vite.config.js to use refresh: false, was not correct.

To allow us to use the new Sage 11 theme on AWS, we are using a custom script (npm run watch) in package.json:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "watch": "vite build --watch",
    "translate": "npm run translate:pot && npm run translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"theme.json,patterns,app,resources\"",
    "translate:update": "for file in ./resources/lang/*.po; do wp i18n update-po ./resources/lang/sage.pot $file; done",
    "translate:compile": "npm run translate:mo && npm run translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },

This watches for file changes and we are forced to update the browser manually. However, if anyone has a suggestion with how to get HOT/HMR to work on a live development server that would be awesome.

Thanks!
/Alex