How to compile vue components from cshtml files without messing up renderbody? - javascript

Got an EpiServer project where I want to insert .vue components.
I have tried to follow this project, where they can render .vue components from their cshtml files dynamically: [https://github.com/episerver/musicfestival-vue-template][1]
Currently approaching the problem by adding the built app and chunk-vendor js files into the project folder of the C# project and inject the scripts and id’s. Unfortunately, the Vue project takes over the whole app container.
The ideal scenario is to simply add vue components (from the Vue 3 Cli project), into the project like: <hello-world></hello-world>, without it interfering with the renderbody.
So, how do I compile .vue components from cshtml files, while renderbody works as usual?

Related

ASP.NET Core + React | Correct way to structure files

What is the correct way to structure files in real life application?
By default, if I'm correct, ASP.NET Core projects files should be structured as:
[Solution]
[Project]
Dependencies
Properties
Controllers
Models
Repositories
wwwroot
Pages
Startup.cs
Program.cs
appsettings.json
For any static file it should be inside a wwwroot folder, right?
But then why creating a ASP.NET Core project with React + redux template makes a folder 'ClientApp' instead of 'wwwroot' and places all react code in there with folders 'src' 'public'?
I know that you can do that and then in startup.cs enable it with 'app.UseSpaStaticFiles();', But why? Is it just to make it simpler or does it have real life benefits? Should I structure my files same way too?
And if I suppose, or can, use with 'wwwroot', how should wwwroot folder look? I know that wwwroot folder suppose to contain all the static files such as css, images and js
wwwroot
css
js
images
Since react is a js library/framework, should all code be inside js folder like this
wwwroot
css
js
src
actions
components
store
...
images
I been trying to find an answer but everywhere everyone has a different answer.
On a side note, also if using scss, or similar, should all the scss be inside css folder or should there be a scss folder inside wwwroot that on compile saves css code inside css folder?

StencilJS using component in HTML file

I want to use a component created using StencilJS in a regular basic HTML file. I followed these steps:
I have created a stencil component to create the basic my-component example:
npm init stencil
I want to use this component in an HTML file, so I ran
npm run build
I then created an html project with the following structure:
And then I moved the files from the dist folder into the script folder. And I added script tag in the head of my html file that references the component.js file like this:
<script src="script/{component_name}/{component_name}.js"></script>
And I used the component in the html like this:
<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
But my component isn't being rendered. I get an error involving a esm.js file. Can someone help me with this process of compiling my stencil component to be using in a basic HTML project?
Stencil bundles your dist into modules and lazy-loads only the required code based on the components you are actually using in your HTML. So you should serve the whole dist folder along with your website.
The recommended way is to have the following two script tags in your html file:
<script type="module" src="/dist/[namespace]/[namespace].esm.js"></script>
<script nomodule src="/dist/[namespace]/[namespace].js"></script>
(where [namespace] is whatever is set in your stencil.config.ts)
This will instruct browsers who support ES Modules to use the esm bundle, and other browsers will use the ES5 (cjs) bundle.
If my-component is the only component that you're using from your library, then only that code will be lazy-loaded by your page. Stencil knows about component interdependencies and how to lazy-load them accordingly.
There is a new experimental output target (called custom-elements-bundle) that allows you to bundle everything into one js file, which will simplify distribution in some cases. It's only available with the new refactored compiler (which is available using the --next flag, after installing #stencil/core#next) (Stencil 2 has been out for a while now).

Meteor.js with React - Why does the html page not render when I use .jsx, it only renders with .js

I am following the official tutorial from this link:
https://www.meteor.com/tutorials/react/components
I created my own project with a command in the terminal:
meteor create --react new-react-app
The command generated the file structure like in the tutorial only instead of getting imports/ui/App.js and /imports/ui/Task.js I got App.jsx and Task.jsx.
The problem is that the html file does not render the list when I start the server. Only if I change those files in a regular .js it works. Why?
Shouldn't we use .jsx, afterall I have chosen the project with React.js?

How to use compiled angular 2+ project(js code) in other projects ( purl html, angular 1 or angular 2+ or other front-end frameworks)

Now we have 2 projects, one project is Common Components, another is Manage System. And Common Components is built by Angular4, Manage System can be any framework.
Now we want to call Objects of the project Common Components in the way of running time.
When we ran ng build --prod, we got such js files as follows,
inline.812ba51cb65d5b4729c0.bundle.js,
polyfills.805265a201496887139d.bundle.js,
scripts.c44dd7aa4586c311cdaf.bundle.js,
vendor.b19bafe3297743c04903.bundle.js,
main.5c3ed0f42e8c01535b0d.bundle.js
Include them in index.html with <script type="text/javascript" src=“<the url of js file>”></script>
Add root component selector of Common Components libs in index.html (such as )
When the above steps is done, we can load js files, but can not work well, Common Components style can not display normally.
Now, we try to embed the compiled js files into template, will emit an error message as follows, the Uncaught TypeError: Cannot read property 'call' of undefined.
error message link

How do I implement my react component on my site?

New to react and was following a tutorial creating this component. (https://github.com/owenchak/react-weather). I'm using gulp to test everything locally. How do I use my component in an actual website I'm trying to create? I instructed gulp to create a style.css (containing all the sass files), main.js containing the interpretable jsx and index.html that contains all these files.
I have done this before. If you take the bundled js (and) and css and attach it to your html and you've created an element where react will be rendered (e,g <div id="app"></div>) it will work.

Categories

Resources