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.
Related
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'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.
currently, my vue app has a package.json like this:
{
"name": "App",
"version": "0.1.2",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
}
}
In my main.js I have this:
if(process.env.NODE_ENV == 'development')
Vue.prototype.$http.defaults.baseURL = 'http://127.0.0.1:8000/api'
else
Vue.prototype.$http.defaults.baseURL = 'https://api.example.net/api'
I would now like to use webpack to build my app and manage certain things.
What is the best way to integrate webpack into my project now and optimize it?
I would like to use a service-worker to inform the users about a new version every time and ask them to reload the page.
You don't need to integrate Webpack into a Vue CLI scaffolded project. Vue CLI uses Webpack under the hood.
To configure the underlying Webpack, create vue.config.js with a chainWebpack or configureWebpack property:
// vue.config.js
module.exports = {
configureWebpack: {
//...
},
chainWebpack: config => {
//...
}
}
Regarding the Service Worker, you could use the #vue/cli-plugin-pwa plugin, which can be added to a Vue CLI project with this command:
$ vue add pwa
I am using vue cli 3 and here is my vue.config.js:
const path = require('path')
const webpack = require('webpack')
const publicDir = 'public'
const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
publicPath: isProduction ? './dist/' : '',
outputDir: 'public/dist',
indexPath: '../../resources/views/index.blade.php',
filenameHashing: true,
chainWebpack: config => {
config
.entry('app')
.clear()
.add('./resources/vue/main.js')
.end()
config.module
.rule('graphql')
.test(/\.gql$/)
.use('graphql-tag/loader')
.loader('graphql-tag/loader')
.end()
},
configureWebpack: {
plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)]
}
}
I need to delete some files after build for production and I don't know how to detect the build process is over.
I didn't find any documentation on this.
You can do that in your package.json file. You can add your custom script or the modify existing one.
For example take a look at the clean script. You can call this script manually, or add it in another script. In this example it is executed when build script is executed:
"scripts": {
"serve": "vue-cli-service serve",
"watch": "vue-cli-service build --mode development --watch",
"dev": "vue-cli-service --mode development build",
"build": "vue-cli-service build && npm run clean",
"lint": "vue-cli-service lint",
"clean": "rm -rf ../public/dist"
},
...
NOTE: && makes them run sequentially clean will run after build.
How about adding a postbuild script:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"postbuild": "rm dist/<file-to-delete>", // <--- add this one
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
}
I am trying to create a Vue App with WebStorm in Mac. When I run the npm run dev get this error:
npm ERR! missing script: dev
This is my package.json:
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.16"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.0.0-beta.15",
"#vue/cli-plugin-eslint": "^3.0.0-beta.15",
"#vue/cli-service": "^3.0.0-beta.15",
"vue-template-compiler": "^2.5.16"
},
That's because there's no dev script in your package.json. You should do npm run serve. The available scripts are the following
package.json
// ...
"scripts": {
"serve": "vue-cli-service serve", // npm run serve
"build": "vue-cli-service build", // npm run build
"lint": "vue-cli-service lint" // npm run lint
},
// ...