Lando Node.js + Express Example Reflecting File Changes in Browser

[bgonz]

Feature Request / Guidance

As a lando user who wants to begin developing Node.js + Express apps locally, I would like a way to have the browser reflect my recent file changes.

I used the Example -> https://github.com/lando/lando/tree/master/examples/express

• this loads up just fine and I can get the Landing page to load "I said "Oh my!" What a marvelous tune!" which is awesome
• BUT now I am trying to understand how to update the files and see the changes in my browser.

I made an edit to the "app.js" in my local file system -> I can see it made the change to the Docker Container -> 'lando ssh appserver' -> cat app.js ... "I said "Oh my!" What a marvelous tune! Bingo Bango Bongo Baby!" (as edited on my local file system)

But refreshing the Browser does not seem to update the message. What am I missing? The only way I can get the browser to reflect the changes is to 'lando restart' which is unpleasant to do for quick iterative changes. Outside of Lando - I have had success with using PM2 (http://pm2.keymetrics.io/) with my Node.js + Express app.

It would be awesome if the Express Example had a prebuilt tool for monitoring for changes.

@dustinleblanc - mentioned possibly using Webpack for HotReloading @serundeputy - mentioned npm script in the app like build or something; then you can do lando npm build and it will rebuild the served app on changes, but you have to get that or write it.

I tried doing a simple 'npm start' and the equivalent 'node app.js' but both seem to fail.

If it helps at all - here is what I use for just a normal Docker setup using Docker Compose:

version: '3'
services:
  # Node.js + Express Application
  node-app:
    build: ./node-app
    image: node-app
    ports:
      - "3000:3000"
    volumes:
      - "./node-app/src:/node-app"
      # This will map /node-app/node_modules to an anonymous volume maintained by docker
      # 'docker volume ls' -> long UUID
      - /node-app/node_modules
  # PM2 Process Deamon for Node.js + Express Application
  process-manager:
    image: keymetrics/pm2
  # Reverse Proxy Web Server
  nginx:
    build: ./nginx/
    image: nginx
    ports:
      - "80:80"
    volumes:
      - "./nginx/nginx.conf:/etc/nginx/conf.d/default.conf"

-- /node-app/Dockerfile

FROM node

# Install Global Dependencies
RUN npm install pm2 -g
RUN npm install gulp-cli -g
RUN npm install bower -g

# Create app directory
RUN mkdir -p /node-app
WORKDIR /node-app

# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY ./src/package*.json /node-app/
RUN npm install --production
# Bower
COPY ./src/public/javascripts/bower.json /node-app/public/javascripts/
WORKDIR /node-app/public/javascripts
RUN bower install --allow-root

# If you are building your code for production
# RUN npm install --only=production

# Bundle app source
WORKDIR /node-app
COPY ./src /node-app

EXPOSE 3000
# CMD [ "npm", "start" ]
# Use PM2 for Process Management + Reliability of our Application
CMD ["pm2-runtime", "./bin/www"]

[vincenzo]

I am not too sure I get much of this. But I am running node.js apps in Lando, with npm run dev, where our dev command looks like this:

nodemon src/index.js --watch src --exec babel-node -e js,graphql --ignore *.test.js

Changing the code, reloads the app.

Is this what we're talking about? :D

[pirog]

yup

On Tue, Mar 27, 2018 at 1:36 AM, Vincenzo Russo notifications@github.com wrote:

I am not too sure I get much of this. But I am running node.js apps in Lando, with npm run dev, where our dev command looks like this:

nodemon src/index.js --watch src --exec babel-node -e js,graphql --ignore *.test.js

Changing the code, reloads the app.

Is this what we're talking about? :D

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/lando/lando/issues/801#issuecomment-376442545, or mute the thread https://github.com/notifications/unsubscribe-auth/AAri0KnFIFqKfLCbb8alIy-PWiDdwLHMks5tifoBgaJpZM4S13lY .

[pirog]

@bgonz so the mean example already has some autoreload baked into it but all this needs to be set up on the user side of things. We are using nodemon as pointed out by @vincenzo above so you'll probably want pass in arguments that make sense for your use case.

Going to update the express example to use nodemon as well so at least there is a very basic example of this working for people to follow.