I want to addg ckeditor 4.11.4 in my ASP.NET Core MVC project with bundle.
I use ASP.NET Core 2.2 and the bootstrap bundling is working.
This is my package.json :
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": { },
"dependencies": {
"bootstrap": "4.3.1",
"font-awesome": "4.7.0",
"jquery": "3.4.1",
"popper.js": "2.0.0-next.4",
"ckeditor": "4.11.4"
}
}
And this is my bundleconfig.json file:
[
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"node_modules/ckeditor/contents.css"
],
"minify": { "enabled": false }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/ckeditor/ckeditor.js"
],
"minify": { "enabled": false }
}
]
But this does not work. What's the problem?
Font-awesome css references use sprites and webfonts folders !
Copy font-awesome folder to wwwroot/lib folder.
and use in head
<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/regular.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/solid.min.css" />
Related
I set up responsive variants in my create-react-app app after setting up Craco according to Tailwind Docs. These work perfectly in development build but no images load in production build. What am I missing here?
I have determined the issue is most likely in my production configuration. When I "hard-code" any of the background-image URLs directly into my App.css file as a test, they show up correctly in production build.
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer utilities {
#variants responsive {
.test-XS {
background-image: url('https://res.cloudinary.com/.../test-XS.png');
}
.test-SM {
background-image: url('https://res.cloudinary.com/.../test-SM.png');
}
.test-MD {
background-image: url('https://res.cloudinary.com/.../test-MD.png');
}
.test-LG {
background-image: url('https://res.cloudinary.com/.../test-LG.png');
}
.test-XL {
background-image: url('https://res.cloudinary.com/.../test-XL.png');
}
}
/* There are about 20 more sets of these for different images */
}
package.json :
{
"homepage": "http://xxx.github.io/yyy",
"name": "color-portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"#craco/craco": "^6.1.1",
"#tailwindcss/postcss7-compat": "^2.0.2",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.6.3",
"autoprefixer": "^9.8.6",
"postcss": "^7.0.35",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"web-vitals": "^1.1.0"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
}
craco.config.js :
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
tailwind.config.js :
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx,css}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
The issue was in the concatenation I was using in my classNames.
It is covered in Tailwind's documentation here.
"Don't use string concatenation to create class names"
An example of what I was doing incorrectly:
<div className={`card bg-contain ${props.image}-XS sm:${props.image}-SM md:${props.image}-MD lg:${props.image}-LG xl:${props.image}-XL`}>
My workaround to get my project deployed for now: Changing it so that Tailwind does not "tree-shake" the utilities layer by specifying which layers to purge in config (more info in Tailwind Docs here):
tailwind.config.js :
module.exports = {
purge: {
layers: ['base', 'components'],
content: ['./src/**/*.{js,ts,tsx}', './public/index.html']
},
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
I am sure that this makes my build size unnecessarily large, but at least my project is deployed until I figured out a better way to incorporate these dynamic class variants.
I was given a Vue app that is working perfectly in Chrome, Firefox.
But blank page in IE-11 and Ms Edge. No Erorrs in console.
I'm not a Vue developer but I'm interested in Vue. So Tried to find a solution googling it. But no of those solutions works for me. Can someone please tell me what should I do to fix this blank page issue in IE-11 & Edge?.
main.js
import 'babel-polyfill'
import Vue from 'vue'
import Request from './http/request'
const EXCLUDED_PROD = [
'52.59.217.237',
'localhost'
]
babel.config.js
module.exports = {
presets: [
['#vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}
index.html
<!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">
<link rel="icon" href="<%= BASE_URL %>fav.png">
<title>Starline Security</title>
</head>
<body>
<noscript>
<strong>We're sorry but Starline Security doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!--built files will be auto injected-->
</body>
</html>
package.json
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
How do you create your vue project? I create vue project according to this link and choose default. It can run well in IE and Edge without installing other packages.
I compared the files in the working project with yours and the babel.config.js and package.json are different. You could try to edit your babel.config.js and package.json according to below.
babel.config.js:
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
package.json:
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.4.0",
"#vue/cli-plugin-eslint": "^4.4.0",
"#vue/cli-service": "^4.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Besides, it seems that your main.js is not complete. Mine is like this:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
I'm trying to get tailwindcss to work with webpack.
Currently I am getting the following error when running npx webpack:
ERROR in ./src/index.js
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(2:3) Unknown word
1 | function hello(){
> 2 | console.log('hi');
| ^
3 | }
4 |
package.json
{
"name": "blank",
"version": "1.0.0",
"license": "MIT",
"private": true,
"scripts": {
"test": "echo \" no tests specified yo \" && exit 1",
"build": "webpack"
},
"dependencies": {
"tailwindcss": "^1.4.6"
},
"devDependencies": {
"css-loader": "^3.5.3",
"postcss": "^7.0.32",
"postcss-loader": "^3.0.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11"
}
}
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
// ...
use: [
// ...
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
],
}],
}
}
tailwind.config.js
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
}
src/index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
<p>hello</p>
</body>
</html>
src/index.js
function hello(){
console.log('hi');
}
src/styles.css
/* src/styles.css */
#tailwind base;
#tailwind components;
#tailwind utilities;
Also, how can I reference the styles.css in my index.html file? Do I have to grab it from the /dist folder once it is built?
I am trying to develop a multiplayer HTML 5 game with Phaser3, ExpressJS (& SocketIO in the future).
this is my
folder structure
I want to serve my phaser game via the index.html to the client , but whenever I try to load the scripts I get MIME Errors on Firefox and 404 not found on Chromium.
These are the Firefox errors and these are the Chromium errors.
server.ts
// #ts-ignore
import { Socket } from "socket.io";
import { Request, Response } from "express";
import * as path from "path";
const express = require("express");
const app = express();
const http = require("http").Server(app);
const io = require("socket.io")(http);
// #ts-ignore
const uuid = require("uuid");
app.use(express.static('public'));
app.get('/', function (req: Request, res: Response) {
res.sendFile(path.resolve('./index.html'));
});
class GameServer {
constructor() {
this.socketEvents();
}
public connect(port: number): void {
http.listen(port, () => {
console.info(`Listening on port ${port}`);
});
}
private socketEvents(): void {
io.on('connected', () => {
console.log("user connected");
});
}
}
const gameSession = new GameServer();
gameSession.connect(3000);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="public/dist/socket.io.js"></script>
<script src="public/dist/phaser.min.js"></script>
<script src="public/dist/bundle.js" async></script>
<script src="http://localhost:9000/livereload.js"></script>
</body>
</html>
package.json
{
"name": "lasttryphaser",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"precommit": "npm run lint",
"lint": "tslint -c tslint.json -p .",
"prestart:dev": "npm run prestart",
"start:dev": "webpack -w & tsc -w --noEmit src/server/server & nodemon src/server/server.js",
"build:release": "webpack --env=dev --optimize-minimize",
"prestart": "npm i && tsc -p ./",
"start": "webpack && node ./src/server/server.js",
"webpack": "webpack --config webpack.dev.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"phaser": "^3.20.1",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.0",
"uuid": "^3.3.3",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"#types/express": "^4.17.2",
"#types/pixi.js": "^5.0.0",
"#types/socket.io": "^2.1.4",
"#types/socket.io-client": "^1.4.32",
"#types/uuid": "^3.4.6",
"awesome-typescript-loader": "^5.2.1",
"ignore-loader": "^0.1.2",
"nodemon": "^2.0.0",
"npm": "^6.13.1",
"prettier": "^1.19.1",
"resolve": "^1.12.2",
"ts-loader": "^6.2.1",
"tslint": "^5.20.1",
"typescript": "^3.7.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-livereload-plugin": "^2.2.0"
}
}
webconfig.dev.js
const path = require("path");
const tsconfig = require("./tsconfig.json");
const { TsConfigPathsPlugin } = require("awesome-typescript-loader");
const LiveReloadPlugin = require("webpack-livereload-plugin");
module.exports = {
entry: "./main",
output: {
path: path.resolve(__dirname, "public/dist"),
filename: "bundle.js",
},
mode: "development",
resolve: {
extensions: [".ts", ".js"],
plugins: [new TsConfigPathsPlugin()],
},
plugins: [
new LiveReloadPlugin({
port: 9000,
hostname: "localhost",
protocol: "http",
}),
],
module: {
rules: [
{
test: /\.ts$/,
loader: "awesome-typescript-loader",
exclude: [
path.resolve(__dirname, "typings"),
path.resolve(__dirname, "node_modules"),
],
options: tsconfig,
},
{
test: /\.spec.ts$/,
use: "ignore-loader",
},
],
},
};
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"baseUrl": ".",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["dom", "es2017"],
"module": "commonjs",
"noEmitOnError": false,
"skipLibCheck": true,
"moduleResolution": "node",
"alwaysStrict": true,
"noUnusedLocals": true,
"noImplicitAny": true,
"sourceMap": true
},
"paths": {
"client/*": ["src/client/*"],
"server/*": ["src/server/*"],
"shared/*": ["src/shared/*"]
},
"typeRoots": [
"./node_modules/#types",
"./node_modules/phaser/types"
],
"files": [
"src/server/server.ts",
"main.ts",
"./node_modules/phaser/types/phaser.d.ts"
],
"exclude": ["node_modules", "*.spec.ts"],
"awesomeTypescriptLoaderOptions": {
"transpileOnly": true
}
}
I looked up everything I could possibly find on the Internet, and read a book about building multiplayer games with phaser. I tried rebuilding that application from the book (which executes fine on all browsers) and I still get those errors.
Thanks for any help
I am trying to use the Extract Text Webpack Plugin, but I have not been able to generate a new css file for the compiled sass files.
webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry : './src/app.js',
output : {
filename : './dist/bundle.js'
},
module: {
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader','sass-loader']
})
}
]
},
plugins: [
new ExtractTextPlugin({
filename : 'app.bundle.css'
}),
]
}
package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"node-sass": "^4.7.2",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.1",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.1"
}
}
app.js:
var css = require('../css/app.scss');
console.log("This is a test Hi from webpack !!!");
I able to generate a new css file for the compiled sass files
please go through repo for your reference working example
your configuration looks good only ,my be you miss the path or forgot load css file in index.html or may be you did not create any scss files
live example