ASP.NET Core and Angular - SSR - .net-core

...and it's not working. :(
I create ASP.NET Core app from angular template. I actualy followed these directions from these official ssr docs
Setting up ASPNETCORE_Environment variable
Run dotnet new angular
Modify Startup.cs and add UseSpaPrerendering
Add settings to .angular-cli.json
Add tsconfig.server.json
Add app.server.module.ts
Add main.server.ts
Modify csproj BuildServerSideRenderer option
Run npm i in ClientApp directory
In Development it's work fine. But after production build it work's like in development, ssr not working. Angular continues to run on client.
My steps to build:
Run dotnet build -c Release -o out
Angular builds without errors (after build in out dir, creates 2 angular builds - dist and dist-server (dist-server size is 32Kb)
Run dotnet ssr.dll
These basic steps for SSR. But I modify main.ts and main.server.ts files, add these to extraProviders
for main.ts
{ provide: 'OS', useValue: 'Client' }
for main.server.ts
{ provide: 'OS', useValue: 'Server' }
and modify home component
import { Component, Inject } from '#angular/core';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
})
export class HomeComponent {
os: string = null;
constructor(#Inject('OS') public osinject: string) {
console.log(osinject);
this.os = osinject;
}
}
Actualy after build and run my project, i should have seen 'Hello Server', but i see 'Hello Client'.
I tried create 2 times from scratch, tried run in docker container, tried run other projects with ssr (find in github). But it all not working for me
> dotnet --version
2.1.403
> node --version
v8.11.3
Whats went wrong guys?
Here my repo (just in case)

Related

SvelteKit build is working fine locally but on vercel it blews up?

I am trying out the SvelteKit framework and playing with it. I build a dummy page and don't have any issue with the dev command and the build command finding components and sections. However, when I try to deploy it on the Vercel, Vite seems to be having trouble finding components.
[vite:load-fallback] Could not load
/vercel/path0/src/sections/About.svelte (imported by
src/routes/index.svelte): ENOENT: no such file or directory, open
'/vercel/path0/src/sections/About.svelte'
This is the config file I set up module alias and Vercel adapter.
import vercel from '#sveltejs/adapter-vercel';
import { resolve } from 'path';
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
// adapter: adapter(),
adapter: vercel(),
vite: {
resolve: {
alias: {
$src: resolve('./src'),
$components: resolve('./src/components'),
$sections: resolve('./src/sections')
}
}
}
}
};
export default config;
By default, Vercel CLI detecting output directory to be public but I overrode it by vercel_build_output. I also tried with auto adapter resulted in same issue. I tried deployment using github repo directly and with vercel cli too encountered the same issue. I tried it without alias too giving relative import like ../components resulted in same issue their too.
You're filenames is Sidebar.svelte with a lowercase b while when you try to import it, it's SideBar.svelte with capital B

npm run build gives an Error : Image Optimization

I am new to Next.js, I built a simple landing page and wanted to generate a static page using npm run build which I set in package.json to "build": "next build && next export".
But I get this Error:
Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
Possible solutions:
- Use `next start` to run a server, which includes the Image Optimization API.
- Use any provider which supports Image Optimization (like Vercel).
- Configure a third-party loader in `next.config.js`.
- Use the `loader` prop for `next/image`.
Can someone help me, I read the documentation and I created next.config.js in the root and pasted this:
module.exports = {
images: {
loader: 'imgix',
path: '/images/',
},
}
I think that I need a path, but the thing is I am not using hosted images, I have an images folder in the the public folder.
I know this is probably a stupid question, but I'm stuck.
I hosted them on https://imgbb.com and wrote this in next.config.js
module.exports = {
images: {
domains: ['i.ibb.co'],
},
}
and it worked.
Usage:
<Image src="https://i.ibb.co/TMBV2KP/Akwagroup.jpg"
alt="ESMASA TRAVAUX"
width={1050}
height={500}
/>

Application styling not working inside Vue web component

I have a project that uses Spring MVC and Thymeleaf as template engine, but we are slowly deprecating the use of Thymeleaf here at the company, because of this a new module I'm developing is being implemented using Vue JS. As the project is already in production and being used, it's not worth it to remake everything from scratch and build a single Vue JS project. The solution we found to integrate the Thymeleaf front-end to the Vue module was to build the module as a web component and use Maven to move the compiled component to the Thymeleaf project, then use it. Problem is, we just saw that when you build the component, it uses a shadow root (when we disable the shadow mode, the component won't be shown), so the styling we have imported on our main page on Thymeleaf is not loaded on the Vue component unless we import it manually again on the Vue app manually. Is it possible to use the styles we defined previously without having to import the same styles again on the component's code?
Here's some of our configurations to maybe help out...
vue.config.js
// https://github.com/vuejs/vue-web-component-wrapper/issues/12#issuecomment-385141573
function enableShadowCss(config) {
const configs = [
config.module.rule('vue').use('vue-loader'),
config.module.rule('css').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('css').oneOf('vue').use('vue-style-loader'),
config.module.rule('css').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('css').oneOf('normal').use('vue-style-loader'),
config.module.rule('postcss').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('postcss').oneOf('vue').use('vue-style-loader'),
config.module.rule('postcss').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('postcss').oneOf('normal').use('vue-style-loader'),
config.module.rule('scss').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('scss').oneOf('vue').use('vue-style-loader'),
config.module.rule('scss').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('scss').oneOf('normal').use('vue-style-loader'),
config.module.rule('sass').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('sass').oneOf('vue').use('vue-style-loader'),
config.module.rule('sass').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('sass').oneOf('normal').use('vue-style-loader'),
config.module.rule('less').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('less').oneOf('vue').use('vue-style-loader'),
config.module.rule('less').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('less').oneOf('normal').use('vue-style-loader'),
config.module.rule('stylus').oneOf('vue-modules').use('vue-style-loader'),
config.module.rule('stylus').oneOf('vue').use('vue-style-loader'),
config.module.rule('stylus').oneOf('normal-modules').use('vue-style-loader'),
config.module.rule('stylus').oneOf('normal').use('vue-style-loader'),
];
configs.forEach(c => c.tap(options => {
options.shadowMode = true;
return options;
})
);
}
///...
chainWebpack: config => {
enableShadowCss(config);
}
package.json build scripts
"scripts": {
"serve": "vue-cli-service serve --port 8082 ",
"build": "vue-cli-service build --target wc --name relatorio-app ./src/App.vue",
"lint": "vue-cli-service lint"
},

Running grunt sub task inside a custom module

I'm building a grunt module to help me to initialize, create default folder/files and build some WebProjects. I create a custom Grunt module including some custom tasks.
So My module is oshell.grunt and inside this module I've a task InitializeLibrary. This InitializeLibrary is a custom task that request some input from the user before creating the files/folder structure. I use grunt-prompt for this.
My problem is when I run the custom module inside my main project, the task prompt is not found. Can you please share your experience regarding this because I suppose some developers were faced to the same problem
Custom module structure
oshell.grunt
tasks
InitializeLibrary.js
After installing the custom module inside the Main projects
Main projects
oshell.core
node_modules
oshell.grunt
tasks
InitializeLibrary.js
It seems to be ok.
InitializeLibrary.js
module.exports = function(
grunt
){
"use strict";
grunt.initConfig({
"prompt": {
"libraryInfo": {
options: {
questions: [
{
config: "InitializeOpenShellLibrary.version",
type: "input",
message: "Initial version of the library",
default: "0.1.0"
}
]
}
}
}
});
require("load-grunt-subtasks")(grunt);
grunt.registerTask(
"InitializeLibrary",
[
"prompt:libraryInfo"
]
);
}
Main web project grunt file
module.exports = function(
grunt
){
"use strict";
grunt.loadNpmTasks("oshell.grunt");
grunt.registerTask("default", ["InitializeLibrary"]);
};
When I run this grunt in my main project I get this result.
Warning: Task "prompt:libraryInfo" not found. Use --force to continue.
I expected the task prompt to run inside the custom module for having a prompt for the library information.
Thanks a lot for your answers guys.
please install https://www.npmjs.com/package/grunt-prompt and add this code in grunt config file:
grunt.loadNpmTasks('grunt-prompt');

Importing "gitlab" package from MeteorJS returns empty object

I've installed gitlab in my Meteor project with meteor npm install --save gitlab and imported the package in the imports/api/foo.js file with all the following variations (the comment on the front is the log of the Gitlab object):
import Gitlab from 'gitlab'; // {}
import * as Gitlab from 'gitlab'; // { default: {}, [Symbol(__esModule)]: true }
import { Gitlab } from 'gitlab'; // undefined
const Gitlab = require('gitlab'); // {}
const Gitlab = require('gitlab/dist/es5'); // {}
const Gitlab = require('gitlab/dist/latest'); // {}
If I run just console.log(require('gitlab')) with NodeJS, I get the correct result.
How am I supposed to import 'gitlab' from a meteor application?
I tried to reproduce the issue with a clean Meteor 1.8.0.2 project and it is working fine for me:
/server/main.js:
import Gitlab from 'gitlab'
Meteor.startup(() => {
console.log(Gitlab) // [Function: Bundle]
const api = new Gitlab({
url: 'http://example.com', // Defaults to https://gitlab.com
token: 'abcdefghij123456' // Can be created in your profile.
})
console.log(api) // full API as in documentation
})
So what options do you have here?
Make sure you use gitlab on the server
Check the node_modules folder, whether it is really installed there.
Try to reset your project using meteor reset and then start again so all node_modules a rebuild and all Meteor packages are rebuild and the local dev build is rebuild. This will often fix things.
Create a fresh project and start to reproduce the issue step by step, starting from my working example and change the file structure stepwise to the structure of your project.

Resources