I have following component
///assets/js/app.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div className="greeting">
<h1> Hello World! </h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
and html
<!--/templates/layout/app.html.eex-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello Sandbox!</title>
<%= if Mix.env == :dev do %>
<link rel="stylesheet" href="http://domain:8080/styles.css">
<% else %>
<link rel="stylesheet" href="<%= static_path(#conn, "/css/app.css") %>">
<% end %>
</head>
<body>
<div id="root">123</div>
<%= if Mix.env == :dev do %>
<script src="http://domain.ru:8080/app.js"></script>
<% else %>
<script src="<%= static_path(#conn, "/js/app.js") %>"></script>
<% end %>
</body>
</html>
My webpack config is here https://gist.github.com/Slavenin/8376458fe2e30ecc739fddf4a13b3be9 . When I open my page, all scripts are loaded from server, but nothing works. No errors or warnings thrown. Webpack compiles and outputs scripts. But on page I can see only 123. What's wrong?
Sry, I can't comment yet, but could use ReactDom.hydrate method instead of render.
It should work in your case.
Problem in webpack.config.js in https://gist.github.com/Slavenin/8376458fe2e30ecc739fddf4a13b3be9#file-webpack-conf-js-L9-L10 this broke javascript in browser. I do not know why, but it's true.
Related
I bought html template. When I try to use it on react project, some of function not working. One of it owl carousel. owl.js template file dynamically adding divs and styling them. This section working on html page but not on react. I do not get any error from console.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aaa</title>
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/style.css" rel="stylesheet"/>
<link href="assets/css/responsive.css" rel="stylesheet"/>
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"/>
<link rel="icon" href="assets/images/favicon.png" type="image/x-icon"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0">
</head>
<body>
<div id="root"></div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/jquery.fancybox.js"></script>
<script src="assets/js/owl.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/isotope.js"></script>
<script src="assets/js/mixitup.js"></script>
<script src="assets/js/appear.js"></script>
<script src="assets/js/validate.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/map-script.js"></script>
</body>
</html>
With React your public files, such as JavaScript files, should be in a folder called 'public' in your React app, then in the index.html this should be denoted by '%PUBLIC_URL%'.
So in other words, move your assets folder to a folder called public and add '%PUBLIC_URL%/' before the paths for your files.
After 4 hour i found solition for my problem. It is define script links on component instead of index.html. Hope this post helps more people
import '../assets/css/bootstrap.css';
import '../assets/css/style.css';
import '../assets/css/responsive.css';
import React,{ useEffect } from 'react';
import { Helmet } from 'react-helmet';
const useScript = (src) => {
useEffect(() => {
const tag = document.createElement('script');
tag.async = true;
tag.src = src;
document.body.appendChild(tag);
return () => {
document.body.removeChild(tag);
}
}, [src])
}
export function Home(){
useScript('./assets/js/jquery.js');
useScript('./assets/js/bootstrap.min.js');
useScript('./assets/js/popper.min.js');
useScript('./assets/js/jquery-ui.js');
useScript('./assets/js/jquery.fancybox.js');
return(
<div>
<Helmet>
<title>{model.Title}</title>
<meta name="description" content={model.Desc}/>
<meta name="keywords" content={model.Keys}/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-
scale=1.0, user-scalable=0"></meta>
</Helmet>
.......
</div>
)
}
I'm developing a vue3 project.
main.js;
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import store from "./store";
app.use(store);
import router from "./router/index";
app.use(router);
...
//just try...
app.mount("#app");
and my public/index.html
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
body {
margin: 0px;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
And my App.vue;
<template>
<button #click=openNewPage()>create new page</button>
<span>{{message}}</span>
<router-view />
</template>
<script>
methods:{
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
}
</script>
my store object;
export default createStore({
state: {
message:'Hello'
}
});
and my second.html;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
</head>
<body>
<div id="appSecond" style="height:100%">
<template>
<span>{{message}}</span>
</template>
</div>
</body>
</html>
When I open the second screen with the OpenNewPage method, I cannot access both the store object and the components I want to use do not work. I was try it;
second.js
const app2 = createApp({
});
export { app2 };
and my method
import { app2 } from "../second.js";
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
if (t) {
t.onload = function () {
t.window.app = app2;
app2.mount("#appSecond");
}
}
}
Somehow I try to run in second.html but I get a warning like "[Vue warn]: Failed to mount app: mount target selector". The code didn't work anyway. Can you help me?
openNewPage() can't run a script for the newly opened page; only the new page could run its own scripts. When openNewPage() tries app2.mount(), it's running that code on its own page (not the new one), leading to the error you observed.
Solution
Remove the mounting code from openNewPage() so that it only opens the new page:
export default {
openNewPage() {
window.open('second.html', …);
}
}
Update second.html to load the script that mounts the app, and remove the unnecessary <template> within the <div id="appSecond">:
<body>
<div id="appSecond" style="height:100%">
<span>{{message}}</span>
</div>
<script src="./second.js"></script>
</body>
In second.js, add the code that mounts your app:
// second.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#appSecond')
I am trying to move my webEngage script into another file, so I can pass it as an entry point in my webpack. Here is what I already have in my index.ejs
<head>
<meta charset="utf-8" />
<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" />
</head>
<body>
<!-- ICONS SPRITE -->
<div style="display: none">
<% if (htmlWebpackPlugin.files.sprites) { for (var spriteFileName in
htmlWebpackPlugin.files.sprites) { %> <%=
htmlWebpackPlugin.files.sprites[spriteFileName] %> <% } } %>
</div>
<div id="root"></div>
<noscript>
scripts is disabled, please enable javascript and try again!
</noscript>
<!-- WebEngage Script -->
<script id="_webengage_script_tag" type="text/javascript">
var webengage;
!(function(w, e, b, n, g) {
function o(e, t) {
e[t[t.length - 1]] = function() {
r.__queue.push([t.join('.'), arguments]);
};
}
.
.
.
})(window, document, 'webengage');
</body>
I was thinking of declaring an IIFE in a scripts.js file, but it didn't work.
I would appreciate your help in advance
I just want to try out a Hello World of an UI framework for React, called CoreUI.
But it says I got my JSX wrong and unclosed. But I already closed all } and ), so please tell me what am I doing wrong here?
Thanks
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<html lang="en">
<head>
// Required meta tags
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
// CoreUI CSS
<link rel="stylesheet" href="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/css/coreui.min.css" crossorigin="anonymous" />
<title>CoreUI<title/>
<head/>
<body class="c-app">
<h1>Hello, world!<h1/>
// Optional JavaScript
// Popper.js first, then CoreUI JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"><script/>
<script src="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/js/coreui.min.js"><script/>
<body/>
<html/>
);
};
ReactDOM.render(
<App />, document.querySelector('#root')
);
Meta tags are not closed. Try this:
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (
<html lang="en">
<head>
// Required meta tags
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
// CoreUI CSS
<link rel="stylesheet" href="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/css/coreui.min.css" crossorigin="anonymous" />
<title>CoreUI<title/>
<head/>
<body class="c-app">
<h1>Hello, world!<h1/>
// Optional JavaScript
// Popper.js first, then CoreUI JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"><script/>
<script src="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/js/coreui.min.js"><script/>
<body/>
<html/>
);
};
ReactDOM.render(
<App />, document.querySelector('#root')
);
Your closing tags are not proper.it should be
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return (<html lang="en">
<head>
// Required meta tags
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
// CoreUI CSS
<link rel="stylesheet" href="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/css/coreui.min.css" crossorigin="anonymous" />
<title>CoreUI</title>
</head>
<body class="c-app">
<h1>Hello, world!</h1>
// Optional JavaScript
// Popper.js first, then CoreUI JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"></script>
<script src="https://unpkg.com/#coreui/coreui#3.0.0-rc.0/dist/js/coreui.min.js"></script>
</body>
</html>
);
};
ReactDOM.render(
<App />, document.querySelector('#root')
);
I am using EJS and I need to set meta tags for every post. I have boilerplate in the layouts folder, which I include on each page. When the user enters the posting page, I need to set dynamic meta tags and title.
My boilerplate
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<% include ../partials/navbar.ejs %>
<div class="container-fluid">
<% include ../partials/filter.ejs %>
<div class="row">
<div class="col-sm-12 col-lg-10">
<%- body -%>
</div>
<div class="col-sm-12 col-lg-2">
<% include ../partials/sidebar %>
</div>
</div>
</div>
</body>
</html>
I am trying to pass title to the posting page in this way
res.render('post/index', {title: post.meta.title, post: post});
But I have an error that title is not defined in the boilerplate;
if i understood the problem correctly, i made a sample for you.
mongoose schema for posts
const postScheme = new Schema({
"title": String,
"description": String, // meta description
"robots": String, // index or noindex
"lang": String, // en, fr, tr
"pathname": String, // post-pathname
"main": String // post body content
})
Get the post data and rendered.
Post.findOne({ _id: req.params.id }, (err, data) => {
res.render('post/index', { 'data': data })
}).lean()
and edit .ejs file.
<!doctype html>
<html lang="<%= data.lang %>">
<head>
<meta charset="UTF-8">
<title> <%= data.title %> </title>
<meta name="description" content=" <%= data.description %> "/>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<% include ../partials/navbar.ejs %>
<div class="container-fluid">
<% include ../partials/filter.ejs %>
<div class="row">
<div class="col-sm-12 col-lg-10">
<%- data.main %>
</div>
<div class="col-sm-12 col-lg-2">
<% include ../partials/sidebar %>
</div>
</div>
</div>
</body>
</html>
Do you render title variable in all pages? If not that's why you get undefined error. Check for undefined with locals object and enclose your variable in title html tags.
In case you don't render a title variable you can set a generic title for the rest of the pages
<title> <%= locals.title ? title : 'Α generic title' %> </title>