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.
Related
I'm implementing a VSCode extension. I set up the project following this link.
It generates a starter project with a src/test/runTest.ts file:
import * as path from 'path';
import { runTests } from '#vscode/test-electron';
async function main() {
try {
// The folder containing the Extension Manifest package.json
// Passed to `--extensionDevelopmentPath`
const extensionDevelopmentPath = path.resolve(__dirname, '../../');
// The path to test runner
// Passed to --extensionTestsPath
const extensionTestsPath = path.resolve(__dirname, './suite/index');
// Download VS Code, unzip it and run the integration test
await runTests({ extensionDevelopmentPath, extensionTestsPath });
} catch (err) {
console.error('Failed to run tests');
process.exit(1);
}
}
main();
And a command in the package.json:
{
"compile": "tsc -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
}
Is there a way to generate a coverage report with it?
VSCode extension unittesting uses Mocha under the hood. You can generate coverage reports like in any other Typescript/Javascript project using one of the many available frameworks, e.g. c8, jest, istanbul, etc.
Install the framework of your choice, here I use c8
npm i --save-dev c8
and add to scripts
"scripts": {
"compile": "tsc -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js",
"coverage": "c8 --check-coverage npm run test"
}
Depending on your extension you might need to create a configuration file with the files you want to check for coverage. Here we are checking the compiled .js files placed under the out/ dir and we also excluding the files responsible for unittesting i.e. out/test/ (usually).
.c8rc
{
"all": true,
"include": ["out/**"],
"exclude": ["**/node_modules/**", "out/test/"],
"reporter": ["html", "text"]
}
Run the coverage script and you should get an output of your coverage
npm run coverage
some of my functonality is breaking in prdo build with SSR but working fine with local SSR build.
I am not able to create the exact prod build command.
here is my dev build command
"ng": "ng",
"sonar": "sonar-scanner",
"start": "ng serve",
"start:ssl": "ng serve --ssl --disable-host-check",
"build": "node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev:ssr": "node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng run mystore:serve-ssr",
"serve:ssr": "node --max-http-header-size=16384 dist/mystore/server/main.js",
"serve:dev:ssr": "node --max-http-header-size=16384 dist/mystore-server/main.js",
"build:dev:ssr": "node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng build && node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng run mystore:server",
"build:ssr": "(cp server.prod.ts server.ts || copy server.prod.ts server.ts) && node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng build --prod && node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng run mystore:server:production && mv dist/mystore-server/main.js dist/server.js || move dist\\mystore-server\\main.js dist\\server.js",
"prerender": "ng run mystore:prerender"
and the combined command I ran is
yarn build:dev:ssr & yarn serve:dev:ssr
I need how this replace Backend OCC url in the build
If you are using version 4.0, you may need to set the CX_BASE_URL as an environment variable when you build. There is an article here about the way the OCC url is handled between 3.0 and 4.0: https://chowdera.com/2021/08/20210807233507800o.html
Hello I wish compile Vue files with Gulp, so far I've used gulp, webpack and webpack-stream which did the trick, my Vue compiling was set through webpack.config.js and webpack-stream was great for that.
But since I updated package.json and Vue to rely on vue-cli-service and vue.config.js I have to compile with 'npm run ...script andrun "vue-cli-service build".
I've managed to get it working like this:
In gulpfile.js
gulp.task('site-js', siteJS);
function siteJS() {
return gulp.src('src/js/**.js')
.pipe(plumber())
.pipe(webpack(webpackConfig))
.pipe(gulpif(globalVars.productionBuild, uglify()))
.pipe(gulp.dest(destDir));
}
In package.json
"scripts": {
"build-dev": "gulp build-dev",
"build": "gulp build",
"css": "gulp css",
"js": "gulp js",
"vuejs": "./node_modules/.bin/vue-cli-service build ./src/vue/app.js",
"dev": "gulp watch",
},
This works fine when I run 'gulp build' but it does not support 'gulp watch' as when .exac() is run from gulp watch state it crashes.
Is there a way to run vue build from code using vue-cli-service?
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?
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",
}