Gulp + Browserify Webapp - How to include Bootstrap CSS files - css

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

My css is not working in node.js Getting this error (ERROR IN DESCRIPTION) as it is too long

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?

css not loading even though there're no errors and it's linked correctly in ejs

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"));

add css with express and node js

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

React single component on different pages ASP.NET

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>.

Style in KendoUI with AngularJS

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

Resources