I have a react/node app and i am using ejs like so:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EJS Is Fun</title>
<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body { padding-top:50px; }
</style>
</head>
<body class="container">
<header>
Hi header here !
</header>
<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
</div>
</main>
<footer>
HI footer here.
</footer>
</body>
</html>
I would like to add a script tag which basically added the main entry point of the react app. how do i do this ?
Basically when webpack loads the document on npm run start (i'am using create-react-app) the js bundle file are automatically added to the html document. similarly how can i add these bundled files to my ejs file ?
P.S.
Webpack in dev mode does't really generate any physical files.
the node and react are running on on different ports.
Related
I've been using an open source website to host a domain.
The original github project is using symfony to build the project.
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
I noticed that when deploying to IPFS, the index.html was using absolute pathing:
<!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></title>
<link rel="icon" type="image/png" href="/build/images/fav.png" />
<link rel="stylesheet" href="/build/main.css">
<script src="/build/main.js"></script>
</head>
<body>
<main>
<img id="logo" src="/build/images/logo.png" alt="Logo" />
<div id="minting-dapp"></div>
</main>
<div id="notifications"></div>
</body>
</html>
So I deleted the index.html file and decided to use rebuild the project, but I noticed that encore, does not build the index.html file ever.
I would like my index.html file to update using with the build.
How can I configure it to use the homepage variable to use relative pathing similar to how npm build works see this answer for reference
Encore does not build any html files, it generates files for js and css
such as vendor files, runtime, ...
-> Webpack Encore
If the html file is a index.html.twig
You can directly specify it in the code :
<body>
<main>
<img id="logo" src="{{ asset('/images/logo.png')}}" alt="Logo" />
<div id="minting-dapp"></div>
</main>
<div id="notifications"></div>
</body>
And then it will not use the absolute path -> Check Asset Component
I downloaded the latest copy of MathJax through Git, installed it somewhere, and wrote the following document:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notes - Wenke's Patterns in Prehistory</title>
<script id="MathJax-script" async src="../../../../MathJax/e5/tex-chtml.js">
</script>
</head>
<body>
$ e^i $
</body>
</html>
When I try to run it in a browser the console prints the message Loading failed for the <script> with source “file:///home/username/underconstruction/MathJax/e5/tex-chtml.js”..
I believe the README.md file that comes with the download indicated that tex-chtml.js was supposed to be the file to link in the HTML document. I've seen elsewhere reference to a MathJax.js file but that was not included in my download.
You specify the location ("../..") of the file "tex-chtml.js" relative to the location of the HTML-page containing $e^i$. The file is likely not there as the warning message indicates. If you specify a path relative to the current HTML-page be also sure that the relative path is the same on your localhost and on the server.
A simple method for using MathJax is given on https://www.mathjax.org.
You do not need to download MathJax from anywhere. Just include the following lines in your HTML-file:
<head>
<script>
MathJax = {tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]}};
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
</head>
I am trying to render the basic cesium viewer from a local development server using node.js with express (cesium 1.57 downloaded via npm). The page loads correctly when the CSS is loaded from cesium's servers, but not when I try to load it locally from my node_modules folder. I'd like to have the files server side so I can eventually change the display and certain sandbox settings for the infoboxes to suit the app I'd like to build.
This works:
index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>mapsTest</title>
<script src="/scripts/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
<!-- <link type=text/css href='/styles/widgets.css'></link> -->
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height:100%"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYzhjNjk0My04MzNjLTQyZTItOWRkOS1lZmQxYjE2YzM4NDYiLCJpZCI6MTAyMTYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTU5NjMzNjB9.DSk7rCttQeOvYyCnuesEtoiA8OUSGwitJaiBUUeqlxw';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
While this doesn't work:
index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>mapsTest</title>
<script src="/scripts/Cesium.js"></script>
<!-- <link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /> -->
<link type=text/css href='/styles/widgets.css'></link>
</head>
<body>
<div id="cesiumContainer" style="width: 100%; height:100%"></div>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYzhjNjk0My04MzNjLTQyZTItOWRkOS1lZmQxYjE2YzM4NDYiLCJpZCI6MTAyMTYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTU5NjMzNjB9.DSk7rCttQeOvYyCnuesEtoiA8OUSGwitJaiBUUeqlxw';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
app.js: setting up the routes for getting the local css file
app.use('/styles', express.static(__dirname + '/node_modules/cesium/Build/CesiumUnminified/Widgets'));
app.get('/styles/widgets.css', function(req, res) {
res.sendFile(__dirname + '/node_modules/cesium/Build/CesiumUnminified/Widgets/widgets.css');
});
I've tried copy and pasting the code that is pulled from the cesium css link into my local copy of widgets.css, though it still doesn't work, so I am wondering whether this has something to do with how node/express loads css files? There are no errors in the firefox or chrome consoles when I load the page.
I think you might just be missing rel="stylesheet" in the link there.
Also type="text/css" is missing the double-quotes.
I just downloaded the new amCharts4 into my node.js app via npm to test it. Wenn installed I find the files chore.js and charts.js in MyNodejsApp/node_modules/#amcharts/amcharts4 :
MyNodejsApp
_node_modules
|_#amcharts
|_amcharts4
|_charts.js
|_core.js
|_amcharts4-geodata
_public
|_css
|_styles.css
|_js
|_main.js
_views
|_partials
|_scripts.ejs
|_dashboard.ejs
|_index.ejs
app.js
As you can see I placed my css and js files in folder public. I'm also using ejs and call the files via views/index.ejs and dashboard.ejs. I'm then loading my js files via script.ejs.
script.ejs
<script type="text/javascript" src="/js/main.js"></script>
# this worked
<script type="text/javascript" src="//www.amcharts.com/lib/4/core.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/4/charts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/4/themes/animated.js"></script>
# this did not work
<script type="text/javascript" src="/js/amcharts/core.js"></script>
<script type="text/javascript" src="/js/amcharts/charts.js"></script>
<script type="text/javascript" src="/js/amcharts/themes/animated.js"></script>
dashboard.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<% include partials/head %>
</head>
<body>
<div id="chartdiv"></div>
<% include partials/script %>
</body>
</html>
Where and how do I exactly integrate and call the charts.js and core.js file? I'm assuming also in my script.ejs ? But do I copy & paste charts.js and core.js files in my public/js folder (which didn't work under folder public/js/amcharts)? or how do I integrate and access them?
https://www.amcharts.com/docs/v4/getting-started/basics/
I'm building a simple web app that will run on a server that doesn't have internet access. This node app is built by hand and not using webpack. Vue works, but I can't seem to get Vuetify to work. I have installed vuetify and material-design-icons using npm. Here is my index.html file:
<html>
<head>
<link rel="stylesheet" media="all" href="../node_modules/vuetify/dist/vuetify.min.css" type="text/css"/>
<link rel="stylesheet" href='../node_modules/material-design-icons-iconfont/dist/material-design-icons.css' type="text/css">
<script src="./scripts/vue.js"></script>
<script src="../node_modules/vuetify/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-toolbar app>
<v-toolbar-title>Title</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container>Hello world</v-container>
</v-content>
</v-app>
</div>
</body>
<script src="index.js"></script>
</html>
What am I missing?
Just before I posted this question I figured out the answer. So here it is if anyone else is looking for the same thing.
I copied the .css and .js files to folders under my root directory and referenced them in the tag. I also copied the fonts folder from the material-design-icons-iconfont\dist\fonts folder into my styles folder.
<head>
<link rel="stylesheet" media="all" href="./styles/vuetify.min.css" type="text/css"/>
<link rel="stylesheet" href='./styles/material-design-icons.css' type="text/css">
<script src="./scripts/vue.js"></script>
<script src="./scripts/vuetify.js"></script>
</head>