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.
Related
After the following steps
install a clean Vue3/Vite application as outlined in the docs (Vue application runs correctly)
install Storybook as describes in the docs
run Storybook (npm run storybook)
I run into the following error:
importers[path] is not a function
TypeError: importers[path] is not a function
at StoryStore2.importFn (http://localhost:6006/virtual:/#storybook/builder-vite/storybook-stories.js:6:31)
at StoryStore2.loadCSFFileByStoryId (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2297:19)
at StoryStore2._callee2$ (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2355:29)
at tryCatch (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:46:44)
at Generator.invoke (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:213:26)
at Generator.next (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-IKIHLHDP.js?v=58e9ae5a:87:25)
at asyncGeneratorStep2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2140:24)
at _next (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-WS7C7QNU.js?v=58e9ae5a:2158:9)
What could be wrong here and how can this be solved?
Apparently the following steps will create a clean Vue 3/Vite/Storybook installation:
npm create vite#latest
Project name: <project name>
Select a framework: Vue
Select a variant: Typescript
cd <project name>
npm install
npx storybook init --builder #storybook/builder-vite --type vue3
npm install #storybook/builder-vite#0.3 --save-dev (mdx stories are not working with version 0.4)
npm run storybook
It creates the following package.json:
{
"name": "Test project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
"vue": "^3.2.45"
},
"devDependencies": {
"#babel/core": "^7.20.12",
"#storybook/addon-actions": "^6.5.16",
"#storybook/addon-essentials": "^6.5.16",
"#storybook/addon-interactions": "^6.5.16",
"#storybook/addon-links": "^6.5.16",
"#storybook/builder-vite": "^0.3.0",
"#storybook/testing-library": "^0.0.13",
"#storybook/vue3": "^6.5.16",
"#vitejs/plugin-vue": "^4.0.0",
"babel-loader": "^8.3.0",
"typescript": "^4.9.3",
"vite": "^4.1.0",
"vue-loader": "^16.8.3",
"vue-tsc": "^1.0.24"
}
}
I am trying to npm run dev my nuxt js vue3 project. And I get error:
My package.json:
{
"name": "my-project",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"core-js": "^3.25.3",
"nuxt": "^2.15.8",
"vue": "^3.0.0-rc.8",
"vue-server-renderer": "^2.7.14",
"vue-template-compiler": "^2.7.10"
},
"devDependencies": {
"node-sass": "^8.0.0",
"sass-loader": "^13.2.0"
}
}
How make it work in compatibility?
You should probably replace
vue-server-renderer+ vue-template-compiler
by
#vue/compiler-sfc + #vue/server-renderer
Also, I'm not sure why you're using an RC version for Vue3, use the latest aka v3.2.45 at the time of writing.
As for Nuxt, Nuxt2 is aimed towards usage with Vue2.
Nuxt's latest stable version for Vue3 is v3.0.0.
At that point, if you are starting a new project, consider using the CLI for such a purpose (don't forget to respect the prerequisites).
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
I have used Github Actions to build and deploy the Vue app to the S3 bucket. The problem is, the build script cannot fetch ENV from the .env or .env.production files, as those are not added in the commit.
I'm getting undefined when I log the ENV variables in my created() hook. As there are only two that are available, but the ones I wanted:
.env & .env.production as of now exactly the same:
VUE_APP_RZ_KEY=<Secret_Key>
VUE_APP_API_URL=<API_URL>
package.json
{
"name": "my_app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm run lint && vue-cli-service serve",
"serve:prod": "npm run lint && vue-cli-service serve --production",
"build": "vue-cli-service build --mode production",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint --fix"
},
"dependencies": {
"axios": "^0.21.1",
"vue": "^2.6.11",
"vue-axios": "^3.2.5",
"vue-router": "^3.2.0"
},
...
}
Github Action .yaml file:
How do I make my ENVs make it to the built?
I propose to add the end data to GitHub Secrets.
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"
}