equivalent of vite 'watch'

So, first time out with Vite. Impressed and puzzled both at the same time.

When running npm run dev assets are built and served from the resources folder. These are hot reloaded on change. All good.

However, assets are not built for deployment. I like to have the compiled assets as part of the repository, but this does not happen unless we remember to stop the vite server and then run npm run build. This seems totally flawed. If I forget to do this, what I approved locally is not what gets deployed to the server.

I know I could setup a deployment pipeline that does this automatically, but this seems an unnecessary complication.

I just want the old npm run watch back so that the assets are rebuilt each time they change.

Anyone with this problem or a solution?

Snapey

3 years ago

Level 122

I have one solution. In package.json add a new vite line adding on --watch

    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch"
    },

we can then run npm run watch and have the same automatically built production resources.

If you want hot reloading as well, open a second terminal window and run npm run dev. When code changes then both scripts run, creating production assets and hot reloading.

Couple also with Freek's tip about hot reloading on blade updates https://freek.dev/2277-using-laravel-vite-to-automatically-refresh-your-browser-when-changing-a-blade-file

18 likes

azc99

3 years ago

Level 4

@Snapey This works great but I have a related problem that npm run dev breaks tailwind on newly installed apps. Created a jetstream app a week or two ago and every thing works (npm run dev, using valet and Freek's tips). Created a new jetstream app yesterday and only npm run build (or your --watch tip) works, but with manual browser refresh., npm run dev shows the browser is being refreshed but tailwind breaks (no css). Older package.json:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^2.9.11"
    }
}

newer package.json which has been updated to latest versions:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "watch": "vite build --watch"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.4",
        "alpinejs": "^3.10.3",
        "autoprefixer": "^10.4.7",
        "axios": "^0.27.2",
        "laravel-vite-plugin": "^0.5.2",
        "lodash": "^4.17.21",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.6",
        "vite": "^3.0.3"
    }
}

btw stopped valet to test and used serve but same result. Are newer versions causing this? Any insight would be appreciated. Thx.

1 like

pasteldenata

3 years ago

Level 1

@azc99 , I'm facing the same issue: no CSS showing up in the browser (e.g. broken UI). I'm developing my app under https:// scheme and vite urls are http:// thus being blocked by the browser as insecure. Another point is that "./sail npm run build" executes successfully, convincing me that this is a Vite port exposure related problem.

abelardolg-lcdlc

2 years ago

Level 1

I am trying to watch the changes inside my files (located under: /resources/js) but "watch": "vite build --watch" doesn't work. What's wrong, please? Thanks in advance. Regards.

martinbean

2 years ago

Level 80

I just want the old npm run watch back so that the assets are rebuilt each time they change.

@snapey It’s just not how Vite works unfortunately. If you’re running npm run dev then assets are built on the fly by the Vite server. It’s only when you run npm run build that assets are actually compiled and then written to files.

This is also another reason why you should be doing npm install and npm run build as part of your deployment process. You don’t need to “remember” to check in compiled files with each commit. It’s also going to make PRs and diffs much nicer as they’re not going to contain diffs of multiple, minified CSS and JavaScript files.

Snapey

2 years ago

Level 122

@martinbean ive been using this approach perfectly well for the last year or so, on several projects. The build folder is git ignored. I have to admit though that I rarely use hot loading

Please or to participate in this conversation.