I've been trying to find a web component framework that allows you to integrate 3rd party web components so that dev won't have to spend time writing CSS when they can reuse libraries such as material component web.
I've checked out svelte, lit-element, and stenciljs but they all run into issues when trying to integrate with 3rd party web components. Are there underlying reason that web component might be incompatible with nesting 3rd party web components?
Update:
I am running into an issue where web components exist in the dom but not visible to users when built.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Svelte + TS + Vite App</title>
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.6.0/webcomponents-loader.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
<script type="module" src="./assets/MatButton.wc.0e5949a7.js"></script>
</head>
<body>
<h1>Test</h1>
<my-mat-button></my-mat-button>
</body>
</html>
It renders correctly in dev but I am looking to share the component for users to embed via script.
In dev:
In /dist:
All other components work correctly except for the web component.
Related
I'm working on a project where I need to populate a template.tsx file with the data I collect from a form and generate a html file with the collected data, then download it to the users computer. How can I achieve this with nextJS?
Thanks in advance.
Here is the flow I need to achieve.
If You use a React-based Framework like Next.js, Gatsby or others, You could use ReactDOMServer to generate HTML markup. But it's not required. Perhaps other template mechanisms are better suited for Your use case. We use ReactDomServer for generating HTML-mails just to stay with React. The mails are simple order confirmations and such stuff.
import ReactDOMServer from 'react-dom/server' // Use as template engine
...
return ReactDOMServer.renderToStaticMarkup(
<html lang="de">
<head>
<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Some arbitrary HTML...</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style={body}>
...
...
With the rest of the "flow" you are on your own. Depends all on your needs and app architecture.
I am trying to show Google One Tap UI on a barebone template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<div id="g_id_onload"
data-client_id="00000-xx000rrr.apps.googleusercontent.com"
data-context="signin"
data-login_uri="https://example.com/login/"
data-auto_select="true">
</div>
</body>
</html>
It showing nothing! I tried on incognito, configured oauth consent screen and whitelisted the localhost domain (with ssl).
What am I missing here?
As is this will automatically log in a user that has given consent to your app. If anything you'll see a popup that says signing in.
What you need is to include the HTML for the button to show up. Like this
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
Also it won't work at all over http, the site has to be https.
you can check here for a generator
https://developers.google.com/identity/gsi/web/tools/configurator
As a simple first test, you might try using a callback and console.log() to output the credential. Then add your back-end server into the mix once you're happy with the UI and confirm your understanding of the sign-in flow.
Incognito mode is the best way to ensure you've not accidentally triggered the exponential cooldown timer.
Visit https://myaccount.google.com/security, Signing in to other sites to find your app, revoke it's permissions to reset the sign-in flow, and to confirm the global opt-out is enabled.
Removing data-auto_select will display the One Tap popup, including it will instead show the automatic sign-in prompt on return visits.
my question may not be related to react directly and maybe related to MVC routes only but i decided to share the bigger picture if anyone thinks i'm on the wrong track.
we have a React / redux application that bundles to an index.html file with css and js resources:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<title>Booking Engine</title>
<link href="./main.837f1985001f2e603b8755f0f28be780.css" rel="stylesheet">
</head>
<body>
<div id="sb-be"></div>
<script type="text/javascript" src="./main.adb11750acf05df99619.js"></script>
</body>
</html>
the resources are dynamicly hashed as you can see.
I need to serve this index.html from a MVC application, i tried to do that using this post (by using MapPageRoute and RouteExistingFiles in RouteConfig).
I can serve the html as expected, though the resources are not being served correctly.
This is my file structure in my MVC app:
--MVCRoot
----Other MVC related folders
----ReactFolder
--------dist
------------index.html
------------main[hash].js
------------main[hash].css
now using a MapPageRoute like so:
routes.MapPageRoute("index", "SomeName/{*pathInfo}", "~/ReactFolder/dist/index.html");
The resource files of main.js and main.css are being served as the index.html, i mean i literally get the index.html instead of the actual js and css files.
I tried with routes.RouteExistingFiles set to true or false but no help.
EDIT: basically my question is how to serve a html static file with a "pretty" (custom) URL without interrupting the page's resources load with their relative path?
I am requesting a single EJS file (setting Express, Request).
app.get('/space', function(req, res){
res.render('space.ejs');
});
The file actually renders but only two of three CSS stylesheet link are work when opening the page with my node app. The link that does not work is W3 school. (the only http of all three, could that be the reason?)
However, the all three links work when I open the file directly in browser.
Could someone explain this behavior?
Here is the .ejs file.
<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<html>
You might be trying to access an insecure resource over a secure connection, if your site is on https you cannot request an http asset. Try changingnthe w3 link to https. It could also be CORS blocked, do you see any errors in the console?
you have written
app.use(express.static(__dirname + '/public'));
<link rel="stylesheet" href="/css/w3.css"/>
you need to add "static" in link tag
<link rel="stylesheet" href="/static/css/w3.css"/> and it should work for you.
in your case your server.js file in lib dir that is why you should do this
app.use(express.static(process.cwd() + '/public'));
I am using asp.net 4 routing and im enjoying it so far. I have one problem only with my javascript files.
I am using a masterpage to add my css and javascript. The css is working fine however the javascript is not.
My links from my masterpage look like this
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="~/_styles/css/core.css" rel="stylesheet" type="text/css" />
<link href="~/_styles/css/facebox.css" rel="stylesheet" type="text/css" />
<script src="~/_styles/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="~/_styles/js/jquery.validate.js" type="text/javascript"></script>
<script src="~/_styles/js/facebox.js" type="text/javascript"></script>
<script src="~/_styles/js/corejs.js" type="text/javascript"></script>
Why does my css load correctly but the js doesnt?
This is question is bit old..but i faced same situation using ASP.NET 4.0 routing and referencing different js file or stylesheet when you move from different directory structure.. what i used to resolve is:
<script src='<%=ResolveClientUrl("~/js/fancybox/jquery.fancybox-1.3.4.js")%>' type="text/javascript"></script>
So key was using ResolveClientUrl
Hope this helps people in future.
Please check and make sure when you adding the link for your script.You just type the
<script src=" and Ctrl+Space then choose your file.If you can't find your project path,just try it to get in that path.Sometime,the file will not in that path when you may be copy & paste that file to your project path(not from your VS Project explorer).
you can use simply _styles/js and _styles/css.