Develop Reference

Vite + React Docker

I'm trying to run my vite+react app using the docker container, the code is running fine but unfortunately, it's not opening in localhost 3000
DockerFile
FROM node:18-alpine
EXPOSE 3000
WORKDIR /react-vite-app
COPY package.json .
RUN yarn install
COPY . .
CMD [ "yarn","build"]
docker-compose.yml
version: "3.8"
services:
reactapp:
build: ./dir
container_name: react_vite_app
ports:
- '3000:3000'
Is something missing, If something is wrong please help me to fix this

I had the exact same issue from the same config, I found the solution here :
https://stackoverflow.com/a/68595302/16795034

Set port in vite config to 3000
import { defineConfig } from 'vite'
import reactRefresh from '#vitejs/plugin-react-refresh'
// https://vitejs.dev/config/
export default defineConfig({
server: {
host: '0.0.0.0',
port: 3000,
},
plugins: [ your plugins here ],
})
Also run docker like this
FROM node:18-alpine
WORKDIR /react-vite-app
EXPOSE 3000
COPY package.json package-lock.json ./
RUN npm install --silent
COPY . ./
CMD ["npm", "run", "dev"]

my settings
Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY . /app
ENV NODE_ENV=production
RUN npm install serve -g
RUN npm install
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "serve"]
package.json
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite -p 3000",
"build": "tsc && vite build",
"preview": "vite preview",
"serve": "serve -s dist -p 3000"
},
"dependencies": {
...
},
"devDependencies": {
...
}
}

Watch template files and copy them to dist/ folder

I'm using typescript on my project and I can successfully watch + compile .ts files and output them to dist folder.
here is the scripts part of my package.json
"start": "npm run build && npm run watch",
"build": "npm run build-ts && npm run tslint",
"test": "cross-env NODE_ENV=test jest --watch",
"watch": "concurrently -k -p \"[{name}]\" -n \"Typescript,Node\" -c \"cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run serve\"",
"serve": "nodemon dist/server.js",
"build-ts": "tsc",
"watch-ts": "tsc -w",
"tslint": "tslint -c tslint.json -p tsconfig.json"
The problem is I want to use js templating engine (nunjucks) and I need to watch the view files inside the views folder and move them to the dist folder.
Is there a way by just using npm scripts or nodejs?
Or do I need to use other tools like gulp or webpack?

I have the "same" request to for a CRUD graphql back-end server, but don't want to use gulp or webpack just to keep it simple.
I see that you use nodemon like me. Then, according the docs at https://github.com/remy/nodemon, it can be used it to monitor changes of any kind of file other than the default js. More over, nodemon can monitor the status of other transactional server other than node.
The first task is detecting the changes of wanted files: in my case I want copy the *.gql files in my src/schema folder to build/schema folder. For that, you can use the ext for the kind of files, and watch option for the source folder to explore.
The second one task is matter of copying the files. Naturally, you can use the copy command of your host OS. In my case I use the DOS xcopy command of the Windows shell (or cp in Unix like OS). nodemon has an "event-hook" with the event option, that can execute a command line when an event occurs. Just we need the restart event of the node server when the changes are detected for nodemon.
You can use the command line options, or a global config file, or in you local package.json project config file. I show up the last one using nodemonConfig section of package.json:
"nodemonConfig": {
"watch": [
"./src/schema",
"./build"
],
"ext": "js,gql",
"events": {
"restart": "xcopy .\\src\\schema\\*.gql .\\build\\schema /Y /O /R /F /I /V /E"
}
}

Ozkr's answer is great, I just want to add what worked for me, I had to change it a bit as nodemon was running into an infinite restart otherwise:
"nodemonConfig": {
"watch": [
"./views",
"./public"
],
"ext": "hjs,js",
"events": {
"restart": "cp -r views dist \n cp -r public dist"
}
}

copy-and-watch does just that:
I use this code to copy html files during development:
"copy_html": "yarn copy-and-watch src/mail_templates/* prod/mail_templates --watch --clean",

Livereload of ionic 2 with docker-compose instance does not work

In a project I have this Dockerfile:
FROM node:6.9.4
RUN npm install -g cordova#4.2.0 ionic#2.2.1
ENV DOCKER_CONTAINER_APP=/web-app
RUN mkdir -p $DOCKER_CONTAINER_APP
ADD . $DOCKER_CONTAINER_APP
WORKDIR $DOCKER_CONTAINER_APP
EXPOSE 8100 35729
RUN echo "ready to go!"
I am using docker-compose, and this is the docker-compose yml file I use in my project:
version: '2'
services:
web:
build:
context: .
environment:
- NODE_ENV=development
- DEBUG='true'
ports:
- 8100:8100
- 35729:35729
volumes:
- .:/web-app
- ./node_modules:/web-app/node_modules
command: sh -c 'npm install; ionic serve --all'
stdin_open: true
All works well, this is the output of a docker-compose run web command:
[10:53:11] ionic-app-scripts 1.0.0
[10:53:18] watch started ...
[10:53:18] build dev started ...
[10:53:18] clean started ...
[10:53:18] clean finished in 57 ms
[10:53:18] copy started ...
[10:53:18] transpile started ...
[10:53:36] transpile finished in 17.96 s
[10:53:36] webpack started ...
[10:53:37] copy finished in 19.39 s
[10:53:51] webpack finished in 15.10 s
[10:53:51] sass started ...
[10:53:56] sass finished in 4.90 s
[10:53:56] build dev finished in 38.18 s
[10:53:57] watch ready in 39.27 s
[10:53:57] dev server running: http://localhost:8100/
But the native ionic livereload does not work. How can I use the Livereload with this ionic docker image ?

When I had similar issue I'd noticed in browser failed attempts to contact port 53703. Here is screenshot:
Chrome developer tools window
Container I used at that moment had been created with command
docker run -i -t -d --name ionic-dev -v /home/timur/Work/:/Work/ \
-p 8100:8100 -p 35729:35729 ionic-dev
So I stopped and deleted it
docker stop ionic-dev
docker rm ionic-dev
And created another container with command (notice published port 53703)
docker run -i -t -d --name ionic-dev -v /home/timur/Work/:/Work/ \
-p 8100:8100 -p 35729:35729 -p 53703:53703 ionic-dev
After that livereload started to work for me.

NPM Package Development - How can i execute the build command after package install?

how do i to generate the build folder after my package be installed?
i did this:
"scripts": {
"build": "babel ./src --out-dir ./build"
}
But when other user install the package the npm not build.
How can i execute the build command after install?

You should use "postinstall" in scripts.
source: https://docs.npmjs.com/misc/scripts

It's almost certainly best not to have a post-install step at all. What you really want to do is to build the project before it is published, and then publish the built version to NPM (assuming that's what you are trying to do). In that case, you might use a prepublish script:
// package.json
"scripts": {
"build": "babel src -d build",
"prepublish": "npm run build"
}
And make sure the built files are included in your files array:
// package.json
"files": ["build"]
Or that your source files are excluded in your .npmignore:
// .npmignore
/src/
If you really do need a post-install step for some reason, use a postinstall script:
// package.json
"scripts": {
"build": "babel src -d build",
"postinstall": "npm run build"
}
But I can't think of a use-case where this would be a good idea.

npm scripts nodemon - watching js and scss files for changes

I'm experimenting with setting up a dev environment to use NPM only, without the use of grunt.js or bower.js.
I followed this tutorial: http://beletsky.net/2015/04/npm-for-everything.html
I'm using nodemon to watch my .js and .scss files for changes which restarts the node server. So in my package.json file, under scripts I have
scripts:
"watch-js": "nodemon -e js --watch public/js -x \"npm run build-js\"",
"watch-sass": "nodemon -e scss --watch public/sass -x \"npm run build-sass\"",
"watch": "npm run watch-js & npm run watch-sass"
But when I run npm run watch it only watches for the public/js files to change. And it triggers a build accordingly.
But it won't watch for the sass files.
Versions:
node v0.10.36 nodemon v1.4.1
I also include a build script which if I run compiles the sass to css, so my build-sass script should be ok
"build": "npm run build-js & npm run build-sass",
"watch": "npm run watch-js & npm run watch-sass"

If you are using windows, you might be encountering the windows problem
Because npm is reliant on the operating systems shell to run scripts commands, they can quickly become unportable. While Linux, Solaris, BSD and Mac OSX come preinstalled with Bash as the default shell, Windows does not. On Windows, npm will resort to using Windows command prompt for these things
If so, you can try using parallelshell or npm-run-all for better cross platform support.

This works for me in Mac OS
Install nodemon
npm install --save-dev nodemon
Install npm-run-all:
npm install --save-dev npm-run-all
In package.json add two scripts:
"startn": "nodemon ./app.js",
"watch-jscss": "gulp watch"
Where 'app.js' is your server file
"gulp watch" can be replace by whatever task is doing a sass watch
In the console:
npm-run-all --parallel watch-jscss startn