So, I have the following two files in the root of my vue.js application:
.env.development:
NODE_ENV=development
VUE_WORDPRESS_API=LOCAL
.env.production:
NODE_ENV=production
VUE_WORDPRESS_API=PRODUCTION
I then have the following in my package.json:
"scripts": {
"serve": "vue-cli-service serve --mode development",
"build": "vue-cli-service build --mode production",
},
So, I'm attempting to switch modes and therefore env variables depending on whether I am running $ rpm run serve or $ npm run build.
However, when running npm run serve, inside my application I am seeing that the environment variables aren't being set correctly:
// console.log(process.env.VUE_WORDPRESS_API) <= Undefined
if (process.env.VUE_WORDPRESS_API === 'PRODUCTION') {
axios.defaults.baseURL = window.location.hostname
}
if (process.env.VUE_WORDPRESS_API === 'LOCAL') {
axios.defaults.baseURL = process.env.VUE_WORDPRESS_API_LOCATION
}
I'm wondering, I must have something wrong with my env files? Are they named correctly? What am I missing?
Related
I have an app on azure devops with .net core and angular.
Now, I want to implement Angular Universal SSR.
Then, I did on my project:
ng add #nguniversal/express-engine --clientProject angular.io-example
My package.json is:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "npm run build:client-and-server-bundles && npm run compile:server",
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "ng build --extract-css --stats-json && webpack-bundle-analyzer dist/stats.json",
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:ssr": "node dist/server",
"build:client-and-server-bundles": "ng build --extract-css --prod && ng run Catevering:server:production"
}
Then, I can see on kudu the next structure files:
server
browser
server.js
[Check here my file structure][1]
Finally, I change the next line on my startup.cs file:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
By:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist/browser";
});
This way works on and my app is working. But, my app is not working as SSR.
In my localhost my app works as SSR with the next command:
node server.js
For that, I tried to change my code like this:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist/server.js";
});
But this is not working. However, my backend web api is working.
Someone can help me?
I need to run my app as SSR on azure devops.
I'm overriding webpack config using vue.config.js:
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
publicPath: 'http://0.0.0.0:8080',
outputDir: './dist/',
chainWebpack: config => {
config.optimization
.splitChunks(false)
config
.plugin('BundleTracker')
.use(BundleTracker, [{ filename: './webpack-stats.json' }])
config.resolve.alias
.set('__STATIC__', 'static')
config.devServer
.public('http://0.0.0.0:8080')
.host('0.0.0.0')
.port(8080)
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.headers({ "Access-Control-Allow-Origin": ["*"] })
}
};
The webpack-bundle-tracker plugin generates a file called webpack-stats.json:
{
"status": "done",
"publicPath": "http://0.0.0.0:8080/",
"chunks": {
"app": [
{
"name": "app.js",
"publicPath": "http://0.0.0.0:8080/app.js",
"path": "/Users/me/dev/vue-app/dist/app.js"
}
]
}
}
My problem is that depending on whether I am in development or in production, I want the path to the file to be different.
When I run npm run serve: the generated path should be http://0.0.0.0:8080/app.js (so that the file is served by npm and I can have hot reload etc.)
When I run npm run build: the generated path should be http://0.0.0.0:8000/static/app.js (so that django can serve the file. please note the port number 8000, not 8080)
So I'm wondering if there's a way for vue.config.js to have 2 versions, one that would be used by serve the other one by build.
I know this question is like two years old.
Use the absolute path for the environment variable VUE_CLI_SERVICE_CONFIG_PATH.
You could use $PWD to instead current absolute path.
// package.json
"scripts": {
"serve": "vue-cli-service serve",
"serve:test": "env VUE_CLI_SERVICE_CONFIG_PATH=\"/var/www/html/your_project/vue.config_serve_test.js\" vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
npm run serve:test will use vue.config_serve_test.js
npm run build will use vue.config.js
I have 6 projects in an Angular workspace and I have to build each. Instead of write six lines in my package.json for each projet, for example :
"build_a":" npm run build a"
"buiild_b": "npm run build b"
I would like to create only one line like this :
"build_app": "npm run build name="aaa""
How I can do it ?
you could rely on environment variables in order to discover such names.
however it depends on which operating system you're using on how to define env variables.
"scripts":{
"build:a":"cross-env NAME=a npm run build",
"build:b":"cross-env NAME=b npm run build",
"build:c":"cross-env NAME=c npm run build",
"build":"browserify src/main.js -o build.js"
}
You would end up with a script section more or less like this.
Finally I found the solution using a node.js script: build-subproject.js.
const { exec } = require('child_process');
const args = process.argv.slice(2).join(' ');
console.log(`RUNNING build with args: ${args}`);
exec(
`ng build ${args} && cd dist/${args} && npm pack `,
(error, stdout) => {
if (error) {
console.error(`exec error: ${error}`);
return;
}
console.info(`stdout: ${stdout}`);
}
);
In package.json,
"build-subproject": "node ./build-subproject.js",
Then run , npm run build-subproject my-project-name
Vue CLI v3 always creating "dist/report.html" when building for production. It's a webpack bundle analyzer report.
I can't find a way to stop building that file.
How to avoid creating "report.html" when building Vue CLI 3 app for production?
Here is my package.json scripts:
"scripts": {
"dev": "npm run serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
},
So far the only way I found to disable it is via vue.config.js:
pluginOptions: {
webpackBundleAnalyzer: {
analyzerMode: "disabled"
}
},
Would be good to know why this thing is always on in Vue CLI 3.
I'd like to share some updates as of Vue CLI 3.8.4:
Vue CLI
webpack-bundle-analyzer is a dependency of #vue/cli-service#^3.9.0
By the default, vue-cli-service build does not generate dist/report.html nor dist/report.json
According to Vue CLI documentation:
--report generates the dist/report.html
--report-json generates the dist/report.json. By the way, this JSON file can quickly become huge
Both argument can be cumulated (both report.html and report.json are generated). When I tested, cumulating both arguments make the build time significantly longer
Webpack bundle analyser
The Vue CLI does not automatically run a web server to preview the report files. If you want to the webpack-bundle-analyzer in the standard way, the webpack configuration has to be updated:
// in {root folder}/vue.config.js
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
.BundleAnalyzerPlugin;
module.exports = {
configureWebpack: {
plugins: [new BundleAnalyzerPlugin()]
}
};
Even without the --report nor --report-json, the report.html will always be generated and the 8888 port should be available as http://localhost:8888 will be prompted
Make sure that your build npm script does not contain the --report parameter.
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"build": "vue-cli-service build",
"report": "vue-cli-service build --report",
}
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: