I am trying to attach a backend to my angular 2 application. I have a Server.js file that grabs my index.html but I get an error at my System.import('app').catch(function(err){ console.error(err) }); in my index.html
error
SCRIPt5009: 'System' is undefined
index.html
<html>
<head>
<base href="/">
<title>LGR</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<link rel="stylesheet" href="./app/css/lgr.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<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/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err) }); <----ERROR HERE!
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
server.js
var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var app = express();
var path = require('path');
mongoose.connect('mongodb://localhost:27017/LGR_db');
app.use('app', express.static(__dirname + "/app"));
app.use('node_modules', express.static(__dirname + "/node_modules"));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, '../LGR', 'index.html'));
});
app.listen('3000', function () {
console.log("Server is running on localhost:3000");
});
I am pretty lost here and any help would be great. I guess I don't understand how to "define" system??
edit: added folder structure
Network output
I would say it's because you are sending the index.html file specifically, and doing a static serve for the stuff in /app. If the systemjs.config.js file was in the /app folder and referenced in the index.html as src='/app/systemjs.config.js' it may work.
-- EDIT: Still not 100% sure what the issue is. I did everything we discussed in it and nothing else. Glad it working though!
Related
I am trying to send a html file through express but it is not able to include tailwindcss
I did all the set up correctly (at least that's what I think)
Is sendFile not capable of sending tailwindcss
This is the express setup
// express setup
const app = express();
const port = 9000;
app.use('/static', express.static('static'))
the endpoint
app.get("/", (req, res)=>{
res.sendFile(path.join(__dirname, "/template/home.html"))
});
html file
<!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>Website</title>
<link rel="stylesheet" href="../static/output.css" />
</head>
<body>
<h1 class="text-sm">Doesn't Works</h1>
</body>
</html>
css file
#tailwind base;
#tailwind components;
#tailwind utilities;
tailwind config file
module.exports = {
content: ["*"],
theme: {
extend: {},
},
plugins: [],
}
and yes the path are correct it works with normal css but not with tailwindcss
I also don't want to use pug for it
Is there a way around it?
You can simple Use the Play CDN to try Tailwind right in the browser without any build step.
Add the Play CDN script tag to the <head> of your HTML file, and
start using Tailwind’s utility classes to style your content.
But remember :
The Play CDN is designed for development purposes only, and is not the
best choice for production.
<script src="https://cdn.tailwindcss.com"></script>
Folder & file structure :
app.js
const express = require("express");
const path = require("path");
const app = express();
const port = 9000;
app.use(express.static("./public"));
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "/public/home.html"));
});
app.listen(port, () => {
console.log(`Server is listening at http://localhost:${port}`);
});
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Express & TailwindCss</title>
</head>
<body>
<div class="flex items-center justify-center h-screen flex-col gap-5">
<h1 class="text-5xl font-bold underline text-green-500">
Express with TailwindCss
</h1>
<h3 class="text-blue-900 text-3xl font-bold">It does works! ;-)</h3>
</div>
</body>
</html>
Output :
Alright guys, I've been following the fcc node js tutorial for beginners. I have trouble getting the use() function from the express framework to work. I followed all the steps (I've copied exactly what he's doing), but when I open the Chrome/Firefox debug console my I can see my folders are not swapped for the alias I've set (is 'static' instead of 'public'). For anyone wondering, I'm stuck on this part -> https://youtu.be/-FV-moMWRSA?t=230.
my code:
const path = require('path');
const express = require('express');
const app = express(); //this function returns an object with many functions
app.use('/public', express.static(path.join(__dirname, 'static')));
app.get('/',
(req, res) => {
res.sendFile(path.join(__dirname, 'static', 'index.html'));
});
app.listen(3000);
my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<script src="/static/js/main.js"></script>
</head>
<body>
<p>Test paragraph</p>
</body>
</html>
anyone know what's going on?
You have wrong paths in your html. Since you're using /public in your middleware, only requests with /public will be looked in the static folder to see if a filewith the requested name exists or not.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/public/css/main.css">
<script src="/public/js/main.js"></script>
</head>
<body>
<p>Test paragraph</p>
</body>
</html>
Hope this helps !
Thanks for taking the time to read my question. My website works fine when I run ng serve. When I run ng build --prod, that works fine as well. Problem is, when I try to render index.html in dist im getting 404 errors. The errors are 404 errors for my main, styles, and polyfill files. I'm trying to build a back end so that I can process card payments. Any help would be appreciated - have been knocking my head against the wall for hours now with no resolve. This is my code below:
server.js
var express = require('express');
var app = express();
var server = require('http').Server(app);
var bodyParser = require('body-parser');
app.use(express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
server.listen(2000, function(){
console.log('Listening on 2000..')
});
console.log(__dirname);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/dist/culture/index.html');
});
src/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Culture</title>
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
dist/index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Culture</title>
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="styles.aaf8a2468e47be90b64b.css"></head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.b4daf421c94934f530d4.js"></script><script type="text/javascript" src="main.36d7357da7cc32c08c65.js"></script></body>
</html>
Again, in short, localhost is giving 200 code which is good it means its connecting to the right place. The problem is once it is connected it can not find any files. What am I doing wrong? Thanks
You must correct this line of code: app.use(express.static(__dirname)); to something like this: app.use(express.static(path.join(__dirname, 'dist/culture'))); if your Angular app files are in dist/culture directory.
Main problem is that when your index.html for example tries to load <link rel="icon" type="image/x-icon" href="favicon.ico"> it uses request to path http://localhost:2000/favicon.ico. Your express backend have defined static assets on __dirname and your actual app is in dist/culture so your request should look like http://localhost:2000/dist/culture/favicon.ico.
Applied change has improved configuration of static files location.
Hi I am studying node js, meanwhile I am facing this issue.
app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
/*This route is working fine */
app.get("/:username", function (req, res) {
res.sendFile(__dirname + "/public/ui/" + "user.html");
});
/*This route is not working */
app.get("/:username/:id", function (req, res) {
res.sendFile(__dirname + "/public/ui/" + "user.html");
});
My folder Structure is
-server
-public
-ui
-ext (external files folder)
- images(all images folder)
-js (My js files folder)
-style (my css folder)
-user.html
-index.js
-user.js
When I am trying to load url http://localhost:8888/stranger/19, my page is loading but none of the files specified in user.html is not loading.
It seems like url of my css file is http://localhost:8888/stranger/ui/style/main.css instead of http://localhost:8888/ui/style/main.css.
This is happening for all files loading via ui. ("http://localhost:8888/stranger" this is coming instead of "http://localhost:8888"). How can I fix this issue
<!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">
<link rel="stylesheet" href="ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="ui/style/main.css" >
<script src="ui/ext/jquery/jquery.min.js" ></script>
<script src="ui/ext/bootstrap-3.3.4/js/bootstrap.min.js" i></script>
<script src="ui/ext/moment.js" i></script>
<script src="ui/js/main.js" ></script>
<script src="ui/js/web.js" ></script>
<script src="ui/js/user_module.js" ></script>
<script src="ui/js/chat_module.js" ></script>
</head>
<body class="pz-main">
</body></html>
Add a route to static file to public directory
app.use(express.static('public'))
Here is the documentation on using the public folder
Then in your html take the path as,
<link rel="stylesheet" type="text/css" href="/ui/style/main.css">
Here are the working codes:
your app.js or server.js where the express is defined
var express = require('express');
var app = express();
app.use(express.static('public'))
app.get("/:username", function (req, res) {
res.sendFile(__dirname + "/public/ui/" + "user.html");
});
app.get("/:username/:id", function (req, res) {
res.sendFile(__dirname + "/public/ui/" + "user.html");
});
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
})
Your user.html in public/ui direcrtory.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/ui/style/main.css">
</head>
<body>
Page will be in green color due to css
</body>
</html>
Your css in public/ui/style directory.
body{
background: green;
}
Follow these steps and it will work.
The problem is with href attribute.
Your current href attribute in link tag is:
<link rel="stylesheet" href="ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >
Which means to use current url as base url. Change it to following:
<link rel="stylesheet" href="/ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >
Simply add / at the start and it should fix the problem.
I have attached my css file to my html file. And then i run and open page using express in node js. However, the css file does not open when i run the webserver through node js.
html(show.ejs)
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css" media="screen" />
</head>
<body>
<h1> Value is <%= detail %></h1>
</body>
</html>
node js
//required npm
var express = require('express');//express 4.*
var path = require('path');
// define app
var app = express();
// set up template engine
app.set('view engine', 'ejs');
//static files
//app.use('/static', express.static('/public')); //not working
app.use('', express.static(path.join(__dirname, 'public'))); //not working
//app.use(express.static(__dirname + '/public')); //not working
//app.use('/public/assets', express.static('public/assets')); //not working
app.get('/show/:id', function (req, res) {
res.render('./panel/show', {
detail: req.params.id ,
});
//port
app.listen(3000);
my project folder
node_modules
views
panel
show.ejs
public
assets
css
style.css
app.js
package.json
By entering <link rel="stylesheet" type="text/css" href="assets/css/style.css" media="screen" /> You are trying to find the assets folder in your out of public directory.
So, when you / it will find public directory which is statically defined in express server.
<html>
<head>
<link type="text/css" href="/assets/css/styles.css" rel="stylesheet">
</head>
<body>
<h1> Value is <%= detail %></h1>
</body>
</html>