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.
Related
I run both the vue and the django.
I have installed webpack_loader and have it in installed apps.
I have the WEBPACK_LOADER in settings.py
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),
}
}
frontend is the name when creating vue.
Here is some more details KeyError at / 'assets' and ModuleNotFoundError: No module named 'webpack_loader'
My page source from http://localhost:8000/ looks like this
<!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>QuestionTime</title>
</head>
<body>
<h1>Vue JS</h1>
<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 -->
<script type="text/javascript" src="http://0.0.0.0:8080/bundle.js" ></script>
</body>
</html>
My page source from http://localhost:8080/ looks like this
<!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="/favicon.ico">
<title>hello-vue</title>
<link href="/js/about.js" rel="prefetch"><link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<noscript>
<strong>We're sorry but hello-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
When I use (django-webpack-loader 1.0.0), I get KeyError at /
When I use (django_webpack-loader 0.7.0), I get no errors, but the vue code doesn't show up (But I see it at localhost:8080).
Just started to work Today, I didn't do anything, and it started to work. I tried 2 times to make a new project with the same code, downloaded all the stuff again.
Didn't work. But then my vue code suddenly stopped working. I turned the server on and off. And then I saw that my vue code had been updated.
I then went to localhost:8000 to see if it worked, and it did.
I believe that God fixed it. Not sure what else it would be.
EDIT: 8 July 2022
I happened to get the error: TypeError: expected string or bytes-like object.
It was point to {% render_bundle 'chunk-vendors' %}
The problem was that I had upgraded the django-webpack-loader to the latest version, the error went away when I use this version django-webpack-loader==0.6.0.
I tried django-webpack-loader==0.7.0 and it works as well.
The version of webpack-bundle-tracker I'm using is 0.4.3
I want want to create an index.jsp file instead of index.html while doing production build. This weird requirement is for capturing the header part which we will getting from other Oracle Authentication Manager so I want load my appliation from index.jsp. My index.jsp should look something like this
<%# page language="java" import="java.util.*" session="true" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CardEncryption</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.3ff695c00d717f2d2a11.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.06daa30a2963fa413676.js"></script><script type="text/javascript" src="polyfills.9a8743e2009b1e7b1fbd.js"></script><script type="text/javascript" src="main.dcf4ad6dff6130812df3.js"></script></body>
</html>
Any suggestion to do this.
I suppose you only want the index.jsp when doing the production build. The development process should still use index.html
In that case you should
Create a index.jsp file in the same directory as your index.html file (so you have both).
Update your angular.json file's production configuration by adding an index property to your production configuration like this:
That will make sure that it uses index.jsp when you build with --prod, but still uses index.html for development.
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>
I am building Angular2 web application through Visual Studio 2017 ASP.NET MVC
All the basic configuration I did.
But when I am trying to build app then it is throwing an error.
Error:
I am surprised some time application run successfully and sometimes it throws this error.
Following this link to do quick setup
package.json, tsconfig.json and systemjs.config.js
copied from quickstart
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/system.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<app-root>Loading...</app-root>
You need to resolve the path to your script with Url.Content():
<script src="#Url.Content("~/node_modules/core-js/client/shim.min.js")"></script>
<script src="#Url.Content("~/node_modules/zone.js/dist/zone.js")"></script>
<script src="#Url.Content("~/node_modules/systemjs/dist/system.src.js")"></script>
<script src="#Url.Content("~/system.config.js")"></script>
This way you ensure it is always resolving to the root of your applications path and not some fubfolder if your Route changes to /controller/action/something.
This question has been asked multiple times I know, but I have searched and tried everything, and it still doesn't work. I'm new to Node. My file directory is set up like this:
io
-node_modules/
-app/
--css
--js
-index.html
-server.js
Server.js:
var express = require('express');
var app = express();
//app.use(express.static(__dirname+'/app/css'));
app.use('/css', express.static(__dirname+'/app/css'));
var server=require('http').createServer(app);
var io=require('socket.io').listen(server);
users=[];
connections=[];
//set up server
server.listen(process.env.PORT || 3001);
console.log('Server running...');
//create a route
app.get('/',function(req,res){
res.sendFile(__dirname+'/app/index.html');
});
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>IO Chat</title>
<meta name="description" content="">
<meta name="author" content="Lloyd">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="css/main.css" rel="sylesheet">
<link href="css/bootstrap.css" rel="sylesheet">
<!--link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.5.1/socket.io.js"></script>
</head>
So what I need to know is why index.html doesn't seem to able to reference my css files. I've tried multiple possible combinations in app.use() and it just doesn't want to work, even though at times I can get to the file directly from the browser.
in the server:
app.use(express.static(__dirname+'/app/css'));
in the client:
<link href="/main.css" rel="stylesheet">
<link href="/bootstrap.css" rel="stylesheet">
I think you're using the app.use wrong
Try it like this :
app.use('css', express.static(__dirname+'/app/css'));
this routes calls to css/... to the static dir named.