I am new in Vite, I follow the scaffolding-your-first-vite-project by
npm init #vitejs/app client --template vue
edit the default package.json
{
"version": "0.0.0",
"scripts": {
"dev": "node_modules/vite/bin/vite.js --host 0.0.0.0 --port 3000",
"build": "node_modules/vite/bin/vite.js build --host 0.0.0.0 --port 3000",
"serve": "node_modules/vite/bin/vite.js preview --host 0.0.0.0 --port 3000"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.2.2",
"#vue/compiler-sfc": "^3.0.5",
"vite": "^2.3.4"
}
}
then
npm install
npm run dev
everything works fine
But when I change the components/HelloWorld.vue, nothing happended, the hot module replacement didn't work
I checked the NODE_ENV and change package.json like below:
"scripts": {
"dev": "node_modules/vite/bin/vite.js cross-env NODE_ENV=development --host 0.0.0.0 --port 3000",
But pages turn into blank and a lot of errors appeared in console.
How can I find out the issue?
Great thanks for anyone helps!
The problem is in your script:
node_modules/vite/bin/vite.js cross-env NODE_ENV=development --host 0.0.0.0 --port 3000
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
cross-env needs to be the primary command, so move it to the beginning:
cross-env NODE_ENV=development node_modules/vite/bin/vite.js --host 0.0.0.0 --port 3000
But just so you're aware, vite by default sets NODE_ENV to development, so there's no need to do it yourself.
Ok, finally I fixed this by
replace the #/~ in your import() with .//../
✅ Do
import('./pages/index.vue')
❌Do not
import('#/pages/index.vue)
more detail: https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
passing usePolling to the server.watch options in the Vite config
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
watch: {
usePolling: true
}
}
})
more detail: https://github.com/vitejs/vite/issues/1153#issuecomment-785467271
Related
With the below package.json file, my CSS and js compile OK and open a browser window proxying the correct site. But saving changes in files isn't causing the browser to refresh.
{
"scripts": {
"watch:css-app": "tailwindcss -i ./src/css/app.css -o ./public_html/assets/css/app.css --postcss --watch",
"watch:js": "./node_modules/.bin/esbuild ./src/js/app.js --bundle --outfile=./public_html/assets/js/app.js --watch",
"watch": "cross-env NODE_ENV=development concurrently 'npm run watch:css-app' 'npm run watch:js'",
"browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy='https://site.local/' --files='./*'",
"watch-sync": "concurrently 'npm run browser-sync' 'npm run watch'"
},
"devDependencies": {
"autoprefixer": "^10.4.13",
"browser-sync": "^2.23.0",
"concurrently": "^6.2.1",
"cross-env": "^6.0.3",
"postcss": "^8.4.20",
"postcss-import": "^15.1.0",
"resolve-url-loader": "^3.1.2",
"tailwindcss": "^3.2.4"
}
}
I've tried a few different things in the --files option:
--files='./path_to_html/**/*.html,./path_to_css/**/*.css'
--files=['./path_to_html/**/*.html','./path_to_css/**/*.css']
omit --files and have --watch instead
But none of those work. Just to be clear, I'm not using Webpack, Gulp etc., I'm just calling npm run watch-sync and package.json is doing the rest.
Anyone know what I'm missing from my config to get this working?
Edit: I've changed things up a bit, but still getting the same result.
Now I've changed my browser-sync script to "browser-sync": "cross-env NODE_ENV=development node bs.js" and bs.js looks like:
const bs = require('browser-sync').create();
bs.emitter.on('init', function () {
console.log('Browsersync is running!');
});
bs.watch('*.html').on('change', bs.reload);
bs.watch('*.css', function (event, file) {
if (event === 'change') {
bs.reload('*.css');
}
});
bs.init({
proxy: 'https://td.local/'
});
As before, when running the script, a new window is launched that loads the site, but changes to files don't cause a reload and also, I'm not getting the message in the console even though the init is telling the script which URL to proxy and it's doing that part. :?
I found the anwser:
bs.init({
injectChanges: false,
files: ['./**/*'],
proxy: 'localhost'
});
How can I load for production and development different settings.
I want something like this for example:
nuxt.config.js
sentry: {
dsn: 'xxx',
config: {
disabled: !env.isDev
}
},
Unfortunately isDev is not usable at that stage.
Create 2 different config files:
nuxt.config.dev.js
nuxt.config.js
and in package.json in scripts section specify config file for dev version
with --config-file nuxt.config.dev.js:
"scripts": {
"dev": "cross-env NODE_ENV=development HOST=111.111.111.111 PORT=3001 nodemon --watch api --exec \"nuxt --config-file nuxt.config.dev.js --spa\"",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production HOST=111.111.111.111 PORT=3002 nuxt start --spa "
}
Thank you for the good input.
In the meantime a found an other solution which is working fine for my current use case.
nuxt.config.js
import stdEnv from 'std-env'
...
sentry: {
dsn: 'xxx',
config: {
disabled: !stdEnv.dev
}
},
...
I think this is a good and easy solution if you have only little difference to your production setup.
At the end I will probably use a mix of both.
EDIT:
importing 'std-env' in nuxt.config.js gave me some problems on production.
I use this peace of code at the moment without any issues:
(process.env.NODE_ENV === 'development')
That way you don't need to import anything!
I have been working on Vue.js and Node.js to build my app. When I have started with Vue it is by default running on 8080 and Node I am running on 3008.
What I am trying to do is due to some circumstances I want to change the port for Vue from 8080 to any other like 8086 or 3005. How can I do that?
Simply you can run the following command to run vue app as per your required port :
npm run serve --port 8086
Another way is to update the serve script command in your package.json file. Just append --port 8086 like so:
"scripts": {
"serve": "vue-cli-service serve --port 8086",
"build": "vue-cli-service build",
"inspect": "vue-cli-service inspect",
"lint": "vue-cli-service lint"
}
If you don't have one create vue.config.js in the root dir of your project and there add this option:
module.exports = {
devServer: {
port: 8086
}
}
In webpack docs you can see all the available options for configuring the dev server.
Check also vue-cli docs.
This is the way! ...that worked for me!
npm run serve -- --port 8086
With "npm":
npm run serve --port 8086
With "yarn":
yarn serve --port 8086
If you are using vite as your build tool, you can override the default port with the one you want by providing a server.port entry in the vite configuration file - vite.config.js
In the example below, I set the default port to 8086
export default defineConfig({
...
server: {
port: 8086,
},
});
in vue.config.js
module.exports = defineConfig({
...
devServer: {
port: 8086,
},
DIR: node_modules#vue\cli-service\lib\commands
CHANGE FILE: serve.js
const defaults = {
host: '0.0.0.0',
port: 8086,
https: false
}
When i run nodemon, it shows
[nodemon] 1.17.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node app.js`
But when i run npm start, everything works fine. Why is nodemon not working
my package.json
{
"name": "sarthakmedia",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "^1.18.3",
"cookie-parser": "~1.4.3",
"cors": "^2.8.4",
"debug": "~2.6.9",
"express": "~4.16.0",
"express-mysql-session": "^1.3.0",
"express-session": "^1.15.6",
"git": "^0.1.5",
"http-errors": "~1.6.2",
"jade": "~1.11.0",
"morgan": "~1.9.0",
"mysql": "*",
"nodemon": "^1.17.4",
"pug": "2.0.0-beta11"
},
"description": "practise",
"main": "app.js",
"devDependencies": {},
"author": "Anita",
"license": "ISC"
}
The api's don't get called at all. nodemon starts fine though
try this
first step
in package.json file
"scripts":{
"start":"node app",
"dev":"nodemon app"
}
second step
install nodemon as devdependencies
using code npm i -D nodemon
3)in app.js file
const express = require("express");
const app = express();
// routes
app.get("/",(req,res)=>{
res.send("hello");
});
// server started
const port =process.env.PORT || 5000;
app.listen(port,()=>{
console.log("server started at port 5000");
});
4)fourth step
use (npm run dev) in command line tool
Nodemon starts by running the file ./app.js.
But your start npm script (which works according to your question) runs a different file ./bin/www/index.js.
I think you should tell nodemon what file is your entry point.
Thus, you should edit the "main" entry in your package.json with the same value, e.g., ./bin/www. In fact, nodemon reads this value in your package.json in order to know what file to start with.
Just run your app with nodemon -w ./ when you are in app root directory.
-w stands for looking at the directory rather than 1 JS file. It is usefu; when you have more than 1 js you need to mon
I have set up Dokku and want to deploy my basic NextJs to it. Everything works fine, except for that the application is running in development mode.
When I output the NODE_ENV variable in my JSX, it is first production but changes to development.
const Index = () => (
<div>
<Link href="/about">
<a>About Page</a>
</Link>
{process.env.NODE_ENV}
</div>
That's what I am seeing. The NODE_ENV variable changes during the page load.
package.json:
"scripts": {
"start": "next src",
"build": "next build src"
},
App.json:
{
"scripts": {
"dokku": {
"predeploy": "npm run build"
}
}
}
Procfile:
web: npm start -- --port $PORT
In addition I set two configs for my dokku application:
dokku config:set my-app NPM_CONFIG_PRODUCTION=false
dokku config:set my-app HOST=0.0.0.0 NODE_ENV=production
What am I missing to get it into production mode?
Solved it by setting up an own express server.
package.json
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
app.json
{
"scripts": {
"dokku": {
"predeploy": "npm run build"
}
}
}
Procfile
web: npm start -- --port $PORT
According to this github issue comment you need to have the application listen to the PORT environment variable.
I could not get this to work though. There are examples of how you can get a npm-script to consume environment variables, but I didn't want to go down that road just now. (see this question for more info on that.)
However, I did notice that Next.js listen to port 3000 by default, and dokku uses port 5000 internally, so I got it to work by simply changing the default npm start script to next -p 5000, that is I hardcoded the Next.js app to use port 5000.
This works for now, but I've only tested it with a clean, minimal project, so not sure if there are other blockers down the road.
Also, it seems like Next.js does in fact pick up on env variables from .env files, but that isn't reflected in the port the app is served on for some reason: