I'm trying to create a simple express project that shows a food menu and the details of each option. My problem is that if I try to set an optional parameter for a route (/:id?) my stylesheet does not load.
My router:
router.get('/detalle/:id?', controller.details)
My controller:
const controller = {
home: function(req,res){
return res.render('index.ejs', {platos: platos})
},
details: function(req,res){
return res.render('detalleMenu.ejs', {platos: platos})
}
}
My HTML/EJS:
<head>
<title>Pimienta & sal</title>
<link rel="stylesheet" href="./css/style.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
If I load http://localhost:3000/detalle just like that I get the css stylesheet linked to detalleMenu.ejs without a problem.
The thing is that if I try to load for example http://localhost:3000/detalle/3 I get the detalleMenu.ejs but without the stylesheet!
Any ideas why this is happening?
react helmet meta description not working? when I test on this site. https://metatags.io/
how do i make it appear, its empty even thou I initialize it on my page component. my title works but not the description.
<Helmet>
<title>{data?.name}</title>
<link rel="canonical" href={`${process.env.PUBLIC_URL}/${slug}`}/>
<meta name="description" content={`${data?.name} Page`} />
<meta name="keywords" content={`
${data?.name},
${data?.genres.toString().replaceAll(',', ', ')},
${data?.platforms.toString().replaceAll(',', ', ')}
, game`}>
</meta>
</Helmet>
I want to use the viewport meta tag to disable the page zoom in the _document.js file in the Next.js.
<Html>
<Head>
<link rel="icon" href="/static/images/logo/favicon.png" type="image/png" sizes="16x16" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
</Head>
</Html>
But it's not working and says viewport meta tags should not be used in _document.js's <Head>.
How can I fix it?
Meta tags added to the custom _document cannot be deduped. This means the proper way to overwrite the viewport meta tag is to do it in your pages.
From Next.js documentation:
Adding <meta name="viewport" ...> in pages/_document.js will lead to unexpected results since it cannot be deduped. The viewport tag should be handled by next/head in pages/_app.js.
Since you probably want to apply it to all pages I'd recommend you do it in _app.
// pages/_app
import Head from 'next/head'
const App = ({ Component, pageProps }) => {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0" />
</Head>
<Component {...pageProps} />
</>
)
}
export default App
Make sure to use 'next/head' and not 'next/document' here.
The viewport tag should be handled by next/head in pages/_app.js. So you can either move it to the _app.js file or if it doesn't exist yet, you can create one like this:
import Head from 'next/head'
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<link rel="icon" href="/static/images/logo/favicon.png" type="image/png" sizes="16x16" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</Head>
<Component {...pageProps} />
</>
)
}
export default MyApp
I am a complete beginner and I would like to add a text box
-eventually I would have buttons with logic characters that would show up in the textbox as I click them).
Should this be a component?
Do I make it via index.html or index.js? None?
I am quite lost and all of my attempts have led to nothing. I assume the only useful code I can provide is my index.html, so here it is. This is basically the default.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Kirk Logic Tool</title>
</head>
<h1>Kirk Logic Tool</h1>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Thank you for any responses, as a learner I really appreciate all who take the time to respond :)
You would create another JS file with a class that extends React.Component and use render(<MyComponent/>, document.getElementById('root')). Here's an example:
class MyComponent extends React.Component {
render() {
return <input type="text"/>
}
}
ReactDOM.render(
<MyComponent/>,
document.getElementById('root')
);
In the server side it renders fine, but when it gets to the client side the react part of html vanishes and I get this error:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) <noscript data-reacti
(server) <div data-reactid=".z
this is my client code before compression:
import {Router, RouterContext, browserHistory} from "react-router";
import React from "react";
import ReactDOM from "react-dom";
const innerHTML = document.getElementById('react-routes').innerHTML;
const routes = JSON.parse(innerHTML);
console.log(routes);
// ReactDOM.render(<RouterContext {...routes} />, document.getElementById('react-app'));
ReactDOM.render(<Router>{routes.routes}</Router>, document.getElementById('react-app'));
// Router.run(routes, Router.HistoryLocation, function (Handler) {
// React.render(<Handler/>, document.getElementById('app'));
// });
I've tryed this three methods the two firsts gives the same error and the third says that Router.run is not a function. (the third was what I had working a few version ago)
the HTML generated by the server is this:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="react-app"><div data-reactid=".1rbyhm4ruo0" data-react-checksum="-854297298"><span data-reactid=".1rbyhm4ruo0.0">Hello </span><span data-reactid=".1rbyhm4ruo0.1">BLBALBLABA LUIZ</span><div data-reactid=".1rbyhm4ruo0.2"><input type="text" value="Login" data-reactid=".1rbyhm4ruo0.2.0"><span data-reactid=".1rbyhm4ruo0.2.1">Hello </span><span data-reactid=".1rbyhm4ruo0.2.2">Login</span></div></div></div>
<script id="react-routes" type="application/json">{"routes":[{"name":"public","path":"/","childRoutes":[{"name":"login","path":"/login"}]},{"name":"login","path":"/login"}],"params":{},"location":{"pathname":"/login","search":"","hash":"","state":null,"action":"POP","key":"zc9mx1","query":{},"$searchBase":{"search":"","searchBase":""}},"components":[null,null],"history":{},"router":{"__v2_compatible__":true},"matchContext":{"history":{},"transitionManager":{},"router":{"__v2_compatible__":true}}}</script>
<script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
<script src="/public/js/bundle.js"></script>
</body></html>
and after the client runs it becames this:
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="react-app"><noscript data-reactid=".zhdkkenpq8"></noscript></div>
<script id="react-routes" type="application/json">{"routes":[{"name":"public","path":"/","childRoutes":[{"name":"login","path":"/login"}]},{"name":"login","path":"/login"}],"params":{},"location":{"pathname":"/login","search":"","hash":"","state":null,"action":"POP","key":"qbhof0","query":{},"$searchBase":{"search":"","searchBase":""}},"components":[null,null],"history":{},"router":{"__v2_compatible__":true},"matchContext":{"history":{},"transitionManager":{},"router":{"__v2_compatible__":true}}}</script>
<script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
<script src="/public/js/bundle.js"></script>
</body></html>
I'm using the same method to renderToString() in the server.
Thanks
My problem was actually in gulp while browserifying the project.
As I'm creating dynamic routes to react-router, I don't have all the react classes being imported while gulp is running and it don't add the right packages to my bundle.js.
I want to make it fully dynamic, I'll keep on working on a better solution for this problem, but for the time being I could make it run by bundling *.react.js.