I added vite to my project to run TailwindCSS. And now I am done and I wanted to build the project. But it only builds my index.html, not all my other pages (just using vanilla html and js). I know the line "npx tailwindcss init -p" to add the tailwind.config.js. Is there a command like this for Vite so i can say to build ./*.html?
{
"name": "tirisi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "npm run build && vite preview"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.8",
"tailwindcss": "^3.0.23",
"vite": "^2.8.6"
},
"dependencies": {
"#tailwindcss/line-clamp": "^0.3.1",
"daisyui": "^2.11.1"
}
}
From https://vitejs.dev/config/
The most basic config file looks like this:
// vite.config.js
export default {
// config options
}
Just create that file and paste that in. There's no vite equiv to npm init or tailwind init
Related
I'm trying to create an npm scripts configuration that compiles scss and uses browser-sync to reload the browser when files are written to the css directory.
The scss compilation works.
However, after the css is rewritten, browser-sync is not reloading the browser.
My package.json:
{
"name": "bob",
"version": "0.1.0",
"description": "testing",
"watch": {
"sass": {
"patterns": [
"./src/sass"
],
"extensions": "scss"
},
"bsReload": {
"patterns": [
"./src/css"
],
"extensions": "css"
}
},
"scripts": {
"dev": "concurrently \"npm run watch\" \"npm run bs\" ",
"bs": "browser-sync start --proxy \"http://mylocalsite.localdev\" ",
"bsReload": "browser-sync reload",
"watch": "npm-watch",
"serve": "http-server dist",
"sass": "sass --style=compressed ./src/sass/main.scss ./css/main.css"
},
"author": "Bob",
"license": "ISC",
"devDependencies": {
...
}
}
I'm trying to run a simple vue.js app. My setup is a vue.js 3 app with vite, built according to the tutorial on the official website. (https://vitejs.dev/guide/#command-line-interface)
Now I try to deploy that on a cloud and I need the command to run the app. I don't find any information about that. My package.json is lacking the entry for start or run. I don't find any information about the command on the official website. What am I missing?
package.json
{
"name": "my-vite-app",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.4"
},
"devDependencies": {
"#vue/compiler-sfc": "^3.0.4",
"autoprefixer": "^10.3.5",
"postcss": "^8.3.7",
"tailwindcss": "^2.2.15",
"vite": "^1.0.0-rc.13"
}
}
You can do it with preview. documentation
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
then
$ npm run build
$ npm run preview
According to the official docs, "vite build" will create the prod build using your index.html file as entry point. You can also specify another publich patch. Check it out.
I created a new repo with $ npm install vue-app and created some test components.
When i run the command $ npm run dev the application starts in localhost port 3000.
I try to add my component in a WP website. When i build the files and add to my theme, i receive the message:
Uncaught SyntaxError: Cannot use import statement outside a module
I found some documentation for webpack but not for vite.config.js.
Anyone can help?
vite.config.js
// vite.config.js
import vue from '#vitejs/plugin-vue'
export default {
plugins: [vue()]
}
package.json
{
"name": "vite-app",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.2.3",
"#vue/compiler-sfc": "^3.0.5",
"vite": "^2.3.5"
}
}
I am trying to run a simple puppeteer script with jest.
Below is my package.json contents:
{
"name": "jest-puppeteer-project",
"version": "1.0.0",
"description": "Test framework using Jest and Puppeteer",
"main": "index.js",
"scripts": {
"test": "jest --forceExit"
},
"author": "Anil Kumar Cheepuru",
"license": "ISC",
"dependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.1",
"babel-jest": "^26.6.3",
"jest": "^26.6.3",
"jest-puppeteer": "^4.4.0",
"puppeteer": "^5.4.1"
}
}
Below is my jest-puppeteer.config.js contents:
module.exports = {
launch: {
headless: false,
},
browserContext: "default"
};
I have also set preset: "jest-puppeteer" in my jest.config.js file.
Below is the error I am getting in the console when I am trying to run the script using the command: npm run test
I tried to look for a solution in various sources, but no luck. Can anyone please help me with this?
If you installed jest locally into your project, then this command:
"scripts": {
"test": "jest --forceExit"
}
won't find your locally installed jest. Try changing it to ./node_modules/.bin/jest --forceExit:
"scripts": {
"test": "./node_modules/.bin/jest --forceExit"
}
I'm trying to set up some form of auto-deployment using the npm package watch. Here is my package.json file:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start -p 60000",
"watch:start": "watch \"npm run start\" ./build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
...
},
"devDependencies": {
"watch": "^1.0.2"
}
}
The app runs fine and it watches the correct folder, but when it detects a change, I get an infinite loop of EADDIRINUSE errors, because it is simply trying to re-run the app, not restart it.
How can I fix this?