We Keep Coding

Laravel Mix HMR Server Does Not Launch

Laravel Mix Version: 6.0.43
Node Version (node -v): 16.13.1
NPM Version (npm -v): 8.1.2
OS: Windows 10 21h2
Description:
THIS IS HAPPENING ON A FRESH NEW INSTALL OF LARAVEL AND MY OTHER PROJECTS
Running npm run hot changes the script tag sources to http://localhost:8080/*/*.* from http://localhost/*/*.* HOWEVER I always get net::ERR_EMPTY_RESPONSE from localhost:8080. The HMR server doesn't launch at all. The terminal output of the command also have no mention of spinning up a new web server.
PS C:\Users\Eric Wang\Documents\GitHub\test-laravel-mix> npm run hot
● Mix █████████████████████████ emitting (95%)
emit
● Mix █████████████████████████ done (99%) plugins
WebpackBar:done
✔ Mix
Compiled successfully in 5.51s
Laravel Mix v6.0.43
✔ Compiled Successfully in 5336ms
┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐├────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤│ css/app.css │ 47.6 KiB │└────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘webpack compiled successfully
Here's a picture of the browser failing to fetch the bundle files
Steps To Reproduce:
I am running Docker 4.5.1 using legacy Hyper-V.
I containerized Laravel and PHP BUT not the frontend and JS. I am running Laravel Mix on my main system.
Clone the fresh installation of Laravel from https://github.com/ericwang401/test-laravel-mix
Clone Laradock in the project folder using git clone https://github.com/laradock/laradock.git
CD to the Laradock folder and make .env file with cp .env.example .env
Inside .env file set PHP_VERSION to PHP_VERSION=8.0 AND DO NOT EDIT MYSQL SETTINGS
Now edit the Laravel environment file
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=default
DB_USERNAME=default
DB_PASSWORD=secret
Start up the Laravel app in Laradock folder using docker-compose up -d nginx mysql
Enter into bash mode in the Docker container docker-compose exec workspace bash
Install Composer dependencies BUT NOT NPM DEPENDENCIES YET composer i
Now exit out of the Docker container CNTRL + D
Install NPM dependencies in project root ON YOUR MAIN SYSTEM npm i
Run on your main system npm run hot
Now go to http://localhost and IT SHOULD be a white screen
Check console logs and it should give net::ERR_EMPTY_RESPONSE when it tries to fetch the bundle files
REMEMBER: the backend is running inside Docker
The frontend (Laravel Mix) is running on the host system
This issue is happening on a FRESH project installation of Laravel 9 + Jetstream AND it's also happening on my other older projects like https://github.com/StratumPanel/Stratum-Panel
The HMR server is simply not launching.

I found out the issue. The problem was that the default port, 8080, Laravel Mix HMR was using couldn't be binded to. Webpack Dev Server doesn't respond with a message of failing to bind to a port. To confirm this issue, I replicated the environment on my friend's PC and it too couldn't bind to port 8080, but this time it reported an error that the dev server couldn't bind to port 8080.
I fixed this issue by specifying
mix.options({
hmrOptions: {
host: 'localhost',
port: 4206
}
});
And it works! On both my friend's pc and my pc.
I used the exact same reproduction instructions on my friend's PC.
I spent way too long investigating this issue 😭

REACT APP not access the google cloud run environment variables

I am using GitLab ci as my CI/CD tool. I am deploying the dockerized react app to cloud run but I am not able to access the environment variables declared on cloud run. Thank you!
Dockerfile
# build environment
FROM node:8-alpine as react-build
WORKDIR /app
COPY . ./
RUN npm install
RUN npm run build
# server environment
FROM nginx: alpine
COPY nginx.conf /etc/nginx/conf.d/configfile.template
COPY --from=react-build /app/build /usr/share/nginx/html
ENV PORT 8080
ENV HOST 0.0.0.0
EXPOSE 8080
CMD sh -c "envsubst '\$PORT' < /etc/nginx/conf.d/configfile.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"
gitlab-ci.yml
default:
image: google/cloud-sdk:alpine
before_script:
- gcloud config set project PROJECTID
- gcloud auth activate-service-account --key-file $GCP_SERVICE_CREDS
stages:
- staging
- production
staging:
stage: staging
environment:
name: staging
only:
variables:
- $DEPLOY_ENV == "staging"
script:
- gcloud builds submit --tag gcr.io/PROJECTID/REPOSITORY
- gcloud run deploy REPOSITORY --image gcr.io/PROJECTID/REPOSITORY --platform managed --region us-central1 --allow-unauthenticated
production:
stage: production
environment:
name: production
only:
variables:
- $DEPLOY_ENV == "production"
script:
- gcloud builds submit --tag gcr.io/PROJECTID/REPOSITORY
- gcloud run deploy REPOSITORY --image gcr.io/PROJECTID/REPOSITORY --platform managed --region us-central1 --allow-unauthenticated --set-env-vars NODE_ENV=production

Credits to Guillaume Blaquiere because this answer is based on his post from this thread.
According to React documentation:
The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime.
Most likely what happens is that you expose static files to your users and the users get the files and load them in their browser like this:
console.log("REDIRECT", process.env.REACT_APP_API_END_POINT)
This returns null because the users' browser execute the Javascript and read the env variable on the current environment: the users' browser. You should have an execution that run on Cloud Run to use the env vars. If the code is ran on user side (in their browser), the env vars will not appear.

As I understand it, you want to access environment variables declared on GCP such as $GCP_SERVICE_CREDS, $PROJECTID, $REPOSITORY and others on your Gitlab pipeline.
To do this, go to Gitlab settings then click on CI/CD. Once there, click on the Expand button in front of Variables and you add your various GCP variables with their Values.

Heroky upload node app and Java jar

I am developing a node.js app at the moment. I plan to host in on heroku.
The catch is this app relies on a jar file, that i will have to run obviously.
Is this possible on heroku, to run java?

You'll need to add the JVM buildpack to your app:
$ heroku buildpacks:add -i 1 heroku/jvm
Then redeploy with:
$ git commit -m "Add JVM" --allow-empty
$ git push heroku master
After this, the java command will be available at runtime.

MeteorJS : How do I check the data fetching from mongoDB on console client?

We have deploy the MeteorJS code on Ubuntu server. We haven't created any client to access this MeteorJS service. First we wanted to verify the service are running properly. Can any one suggest the steps for check the deployment is correct.
We install Meteor on Ubuntu : curl https://install.meteor.com/ | sh
MonogoDB - Already install for NodeJS application - Its Working!
Copy the Code Meteor Code to server using WinSCP
Set the MongoDB path for Code : export MONGO_URL=mongodb://ip:27017/userDB
Run Command to start the app: sudo nohup meteor --port 3001 --production &
Thanks.

Installing node.js for angular - connect.static and karma

I'm trying to install a simple node webserver following the example in Pro AngularJS from apress.
I've installed node.js and the connect and karma modules.
I do get a warning when I installed karma via: "npm install -g karma" that says "optional dep failed, continuing" but then seems to install correctly.
I created a server.js based on the example:
var connect = require('connect');
connect.createServer(
connect.static("../angularjs")
).listen(5000);
when I run it I get TypeError:Undefined is not a function pointing to connect.static.

Apparently in the latest build of connect the static middleware has been moved to it's own package.
nodejs connect cannot find static