I am following this tutorial. I could manage to browserify the bootstrap JS files, but I was wondering how can I add the bootstrap css to my config. I know that files are in node_modules folder, but how can I add them to the build workflow I already have?
gulpfile.js
...
gulp.task('sass', function() {
return gulp.src('./sass/style.sass')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
})
gulp.task('browserify', function() {
// Grabs the app.js file
return browserify('./app/app.js')
// bundles it and creates a file called main.js
.bundle()
.pipe(source('bundle.js'))
// saves it the public/js/ directory
.pipe(gulp.dest('./dist/js/'));
})
...
app.js:
require('angular')
require('bootstrap')
var app = angular.module('app', []);
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>My App</title>
<script src="/js/bundle.js"></script>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div style="height: 100%;" ui-view></div>
</body>
</html>
Related
This is the error I am getting.
Refused to apply style from 'http://localhost:3000/public/stylesheets/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
This is my index.js file
//Requiring Dependencies
const express = require('express');
const app = express();
const mongoose = require('mongoose');
const path = require('path');
//To run and parse EJS
const engine = require('ejs-mate');
//Using EJS-Mate
app.engine('ejs' , engine);
app.set('view engine' , 'ejs');
app.set('views' , path.join(__dirname, 'views'));
app.use(express.urlencoded({extended: true}));
//For use of files like js and css in public directory
app.use(express.static(path.join(__dirname, './public')))
app.get('/' , (req , res) => {
})
app.get('/home' , (req , res) => {
res.render('layouts/boilerplate')
})
This is the boilerplate.ejs where i want to add the stylesheet
<!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">
<base href="/">
<title>BoilerPlate</title>
<link rel="stylesheet" type="text/css" href="/public/stylesheets/style.css">
<!-- BOOTSTRAP CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!-- NAVBAR -->
<%- include('../partials/navbar.ejs') %>
<!--BOOTSTRAP Javascript-->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>
</html>
The bootstrap CSS however is working. So I tried removing the "rel" error goes but the stylesheet is not applied. I also tried to use the base method and still did not work, also added type=text/css, and still didn't work. Any idea why it is not working?
so, I'm trying to link a css file to an ejs file but it's not working, and I think I'm linking them correctly:
<head>
<title>Acres & Karats Calculator</title>
<base href="/">
<link type="text/css" href="css/Acres and Karats Calculator.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap" rel="stylesheet">
and i specified the public directory to be used in express:
let express = require("express"),
app = express();
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (req, res) => {
res.render("Acres and Karats Calculator.ejs")
});
app.listen("3000", () => {
console.log("Server started!");
});
and there are no errors in the console at all and the css is not loaded
file structure:
app.js
views
pubilc
css
Acres and Karats Calculator.css
I solved it by adding rel="stylesheet" and adding a / before the file path
Taking into account the directory layout of your project:
app.js
views
-|_pubilc
---|_css
-----|_Acres and Karats Calculator.css
and the link to the css file in the ejs template:
<link type="text/css" href="css/Acres and Karats Calculator.css">
express static path in your app.js should be updated as follows:
app.use(express.static(__dirname + "/views/public"));
Please help me as i am trying to add a css file all the day long and always fail
app.js code :
var express = require("express");
var app = express();
var path = require('path');
app.set('view engine', 'ejs');
app.set('views', '../node_modules/express/views/');
app.use(express.static('public'));
app.get("/",function(req,res){
console.log("welcome");
res.render("test");
});
app.listen(3000,function(){
console.log("connected")
});
test.ejs code :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- <link type="text/css" href="app.css">-->
<!-- <link href="/public/app.css" rel="stylesheet" type="text/html">-->
<!-- <link type="text/css" href="/public/app.css">-->
<!-- <link rel="stylesheet" type="text/css" href="/app.css" >-->
<link rel="Style" type="text/css" href="/app.css" >
</head>
<body>
<h1>here</h1>
</body>
css code :
body{
background-color: green;
}
server structure :
root-->public-->app.css
i also faced the error : was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). but i solved it and and tried a lot of ways to change the path and keep it in the same folder with the ejs
thank you in advance
in your app.js
app.use(express.static(__dirname + '/public'));
app.use('/public', express.static(__dirname + '/public'));
In app.js:
app.use(express.static('public'))
In ejs/html:
<link rel="stylesheet" href="/css/index.css">
Serving static files in Express
Okay guys thank you all but the solution was just to add ../ before public
app.use(express.static('../public'));
as express was searching for public inside the server folder that has the app.js
I'm new to Reactjs. I'm not using currently any transpiler like Babel nor I'm using a build system like Webpack. I'm on Visual Studio and using Web Compiler extension to compile JSX into JS. Here is my code at the _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<link href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/css/site.min.css" rel="stylesheet" />
</head>
<body>
<div id="root">
#RenderBody()
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/lib/react/react.js"></script>
<script src="~/lib/react/react-dom.js"></script>
<script src="~/js/jsx.min.js"></script> <!--Here is my react compiled JSX file-->
</body>
And in this file, I'm using 2 components:
var MainComponent = React.createClass({
render: function () {
return <div id="Mainaccordion" className="panel-group" role="tablist" aria-multiselectable="true">
<Level1Component title=".NET Core" parentAccordion="Mainaccordion" collapseTarget="dotnet" heading="dotnet">
...............
...............
...............
</div>;
}
});
var AccordionComponent = React.createClass({
render: function () {
return <div><h2>Hello</h2></div>
}
});
ReactDOM.render(<MainComponent />, document.getElementById('accordionexample'));
I've 2 pages, one is Index.cshtml where I'm displaying <MainComponent /> and another page Try.cshtml where I want to use <AccordionComponent />. But when I try to navigate to Try.cshtml, I get the error target container is not a dom element in the browser???
Where I'm doing something wrong? Should I use React Router? Any help will be appreciated.
You should have an element with id='accordionexample' in all the HTML pages where the React component is loaded. e.g. <div id="accordionexample"></div>.
Creating a simple KendoUI drop down list using AngularJS. Not seeing the drop down with the correct styling.
Here's the html...
<div ng-controller="welcome2 as vm">
<select kendo-drop-down-list k-options="vm.phoneOptions"></select>
</div>
The js file:
(function () {
'use strict';
angular.module('app')
.controller('welcome3',
[welcome3]);
function welcome3() {
var vm = this;
vm.activate = activate;
activate();
function activate() {
vm.phoneOptions = {
dataSource: {
data: [
{name: "iPhone"},
{name: "Droid"},
{name: "Windows"}
]
},
dataTextField: "name",
dataValueField: "id",
optionLabel: "Select a phone..."
};
}
}
})();
Inside the index.js file I have (among other things) the following:
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<link href="content/bootstrap.css" rel="stylesheet" />
<link href="content/kendo.common.min.css" rel="stylesheet" />
<link href="content/kendo.default.min.css" rel="stylesheet.css" />
</head>
<body>
// ...
<div ng-view></div>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/kendo.all.min.js"></script>
<script src="scripts/angular-kendo.js"></script>
//....
<script src="app/welcome/welcome3.js"></script>
</body>
</html>
The drop down looks like this:
As opposed to this:
Thanks!!
Usually when you have an unstyled control like that, it's because you have a wrong stylesheet link. It looks like the common file is linked right, but check the other. Also, when using Bootstrap, make sure to use the common-bootstrap CSS file.
http://trykendoui.telerik.com/#burkeholland/UXav