I have this project structure:
app
server.js
frontend
build
index.html
build directory is the result after npm run build in my React app (created with create-react-app). There are more files but I omit them for the example.
I want to serve the React app as static files, so in server.js, I have this:
app.use(express.static(path.resolve(__dirname, 'frontend/build')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'frontend/build', 'index.html'));
});
app.listen(9001);
I navigate to http://localhost:9001 in my browser and there are no errors but the screen is blank. React app is not shown.
If I run the React app (from inside frontend directory) with npm start, it works properly (in default webpack port 3000).
This is the build/index.html file (pretty printed):
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"/>
<title>React App</title><link href="/static/css/main.65027555.css" rel="stylesheet"></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.a4d4d402.js"></script>
</body>
</html>
If I navigate to http://localhost:9001/static/js/main.a4d4d402.js, I can see the javascript file.
I found the error. There was an error in the bootstrap imports in index.html. I was closing a tag twice. In my question looks well because I have pretty printed by hand and maybe I have corrected it somehow.
Related
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 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 have a nodejs app (NodeJs+ React+ MongoDb) deployed on heroku . I am connecting to mongoDb database using mLab , when i run npm start from heroku console it says App listening on PORT: 47147 and mongoose connection successfull . But when i take the app (https://sheltered-spire-71661.herokuapp.com) It displays nothing . What may be the reason ? Any help is appreciated .
Adding the screenshot of the heroku console
and log
UPDATE
FYI i run the Heroku app in local , and it works perfect without any problem . I don't know the problem when deploying in Heroku . Screenshot below
UPDATE 2
index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LMS</title>
<link rel="shortcut icon" href="/assets/images/favicon.ico" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="/assets/style.css">
<link rel="stylesheet" href="https://unpkg.com/react-tabs#2/style/react-tabs.css">
<link href="https://cdn.jsdelivr.net/npm/react-big-calendar#0.19.0/lib/css/react-big-calendar.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/8ff98e4aea.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script src="/assets/javascript.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script src="/bundle.js"></script>
</body>
</html>
When i have index.html like this in Heroku , its throwing me an error in console like
Uncaught SyntaxError: Unexpected token <
I thought its failing to understand the index.html file and i changed the bundle loader script like <script type="text/babel" src="/bundle.js"></script>
The error is gone but displaying blank page . Further i thought its not properly serving the static assets from this SO question Deploy to heroku : Uncaught SyntaxError: Unexpected token < . Then i taken view page source and checked files from the browser
and
<script src="/assets/javascript.js"></script>
and it was showing the code (https://my.herokuapp.com/assets/style.css and https://my.herokuapp.com/assets/javascript.js is working) . But when i access /bundle.js its redirecting back to the heroku app , unlike in local its showing the bundle js code . Express is serving static files like
//Landing
app.get("/", autoRedirect, function(req, res){
res.sendFile(path.resolve(__dirname, "public", "index.html"));
});
//Public files <this needs to stay right below app.get("/")!!!!
app.use(express.static(__dirname + "/public"))
Is it a problem of Heroku doesnt understand the bundle.js file ? I went to the Heroku app console and built the app once more with npm run build and the bundle.js is generated successfully , that also didn't made any changes to the app loader .
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 have an HTML5 web app that I'm packaging up via Electron. I'm packaging via gulp-electron.
The issue I'm having is that when the app is built and I run it, none of the CSS or JS files that are referenced in the index.html file are being loaded.
I can see that the assets were included in the build, and are part of the .app bundle in the : myapp.app/Contents/Resources/app/ folder.
Matter of fact, if I cd to that directory and run a node webserver (httpster), the app runs fine in that manner.
Here's how my CSS/JS is referenced:
<!-- CSS -->
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="./styles/style.css" />
<link rel="stylesheet" href="./bower_components/angular-ui/build/angular-ui.min.css" type="text/css" media="screen">
<!-- Vendors -->
<script type="text/javascript" src="./js/nonangular/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/nonangular/jquery-1.11.2.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./bower_components/angular-ui/build/angular-ui.min.css" type="text/css" media="screen">
<!-- Non-angular libraries -->
<script type="text/javascript" src="./js/nonangular/lodash.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
<!-- Angular external libraries for application -->
<script type="text/javascript" src="./node_modules/angular/angular.js"></script>
<script type="text/javascript" src="./node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="./node_modules/angular-sanitize/angular-sanitize.js"></script>
<script type="text/javascript" src="./node_modules/angular-animate/angular-animate.js"></script>
<script src="./bower_components/angular-ui/build/angular-ui.min.js" type="text/javascript"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js" type="text/javascript" charset="utf-8"></script>
<script src="./bower_components/angular-activity-monitor/activity-monitor.min.js" type="text/javascript"></script>
<!-- Angular components -->
<!-- build:appcomponents js/appcomponents.js -->
<script type="text/javascript" src="./js/app.js"></script>
<script type="text/javascript" src="./js/config.js"></script>
<script type="text/javascript" src="./components/directives/main.nav.directive.js"></script>
<!-- Application sections -->
<!-- build:mainapp js/mainapp.js -->
<script type="text/javascript" src="./js/controller.js"></script>
<script src="./components/main/mainController.js" type="text/javascript" charset="utf-8"></script>
I've tried changing the path to not include the './' before the folders referenced to no effect.
My Gulpfile electron task looks like this:
gulp.task('electron', function() {
gulp.src("")
.pipe(electron({
src: './app',
packageJson: packageJson,
release: './release',
cache: './cache',
version: 'v0.36.10',
packaging: true,
platforms: ['win32-ia32', 'darwin-x64'],
platformResources: {
darwin: {
CFBundleDisplayName: packageJson.name,
CFBundleIdentifier: packageJson.name,
CFBundleName: packageJson.name,
CFBundleVersion: packageJson.version,
icon: './app/gulp-electron.icns'
},
win: {
"version-string": packageJson.version,
"file-version": packageJson.version,
"product-version": packageJson.version,
"icon": './app/gulp-electron.ico'
}
}
}))
.pipe(gulp.dest(""));
});
My app folder structure looks like this:
The frustrating this is I've used this exact setup on another project and the executable works fine, and is able to reach all the assets bundled in the .app bundle just fine.
Turns out there were a few issues with paths.
First the CSS was using relative paths to reference images. Switching this to absolute paths did the trick. This was the same issue for the directives. Switching out relative paths with absolute paths did the trick there.
Finally, the actual CSS and JS files not being loaded looks to be because in the main index.html there was this:
<base href="/">
Which was messing with things. Removing that allowed the CSS and JS to load correctly.
Electron approaches files through file:// protocol, so any base hrefs should start with '.'
To make it work, in index.html (in case '/' is your base href)
change
<base href="/">
into
<base href="./">
..and the path errors will disappear.
So with electron apps we always need to compile the angular dist using a base href starting with '.', when / is your base, compile as
ng buid --prod --base-href ./
I finaly understood what is wrong with including static files in Electron
<link rel="stylesheet" href="./app/css/app.css">
<link rel="stylesheet" href="./app/libs/mdl/material.min.css">
This is not working because they are included from my index.html which is NOT in the root folder.
It's in "app/html/index.html" so I had to tell Electron where is the root of my project !
Simply add <base href="../../"> at the top of your index.html file including the scripts
For me I had to go back 2 folders up to get to the root of the projet. In your case it might less (../ then) or more (../../../ then), etc
I found out that you need to insert the href beginning with "../" like:
<link rel="stylesheet" type="text/css" href="../src/css/index.css"/>