I am trying to install CKEditor in my project. I am using Laravel.
I know I could download the files but I like making my life difficult and I decided that I want to install CKEditor as a npm dependency.
As stated in their documentation here, I added the package to package.json, like this:
"dependencies": {
"jquery": "^1.11.1",
"bootstrap-sass": "^3.0.0",
"elixir-coffeeify": "^1.0.3",
"laravel-elixir": "^4.0.0",
"font-awesome": "^4.5.0",
"ckeditor": "^4.5.7"
}
Now I guess I have to require it in my app.coffee, and so I tried:
window.$ = window.jQuery = require('jquery')
require('bootstrap-sass')
require('ckeditor')
This surely adds the ckeditor.js script to my app.js. However ckeditor seems to have its own dependencies such as config.js or editor.css, and of course the server responds with 404 for those requests.
How could I install CKeditor this way?
Thank you!
There is probably a problem with paths to those CKEditor dependencies. I'm not sure if you are using browserify or something different but for example in browserify using require('ckeditor') will result in ckeditor.js (bundled probably with other js files) file loading from same dir as your app.coffee file while CKEditor dependencies are in node_modules/ckeditor/ dir.
To tell CKEditor from which directory it should load its dependency you may use CKEDITOR_BASEPATH:
window.CKEDITOR_BASEPATH = 'node_modules/ckeditor/'
require('ckeditor')
You may see if there is a problem with loading those files using Network tab in Dev console (e.g. F12 in Chrome).
Note that it's not ideal solution for production environment because then you need node_modules folder on your server. You should probably consider moving only those dependencies to other folder during building/releasing process (and use CKEDITOR_BASEPATH as before with path to this production folder).
Open the resources/js/app.js file
Add the following line:
window.ClassicEditor = require('#ckeditor/ckeditor5-build-classic');
Then execute the Laravel Mix command
npm run dev
HTML JS:
<html lang="es">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Classic editor</title>
<script src="[path]/public/app.js"></script>
</head>
<body>
<h1>Classic editor</h1>
<div id="editor">
<p>This is some sample content.</p>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
Related
I'm currently learning about npm and have npm installed Vue.js. However, this does not work when I try to use create a simple vue instance from my view. It works however when I enter a CDN link in the script source.
So this works:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<div id="app">
{{ message }}
</div>
//This works fine
<script src="node_modules/vue/dist/vue.js"></script>
<div id="app">
{{ message }}
</div>
//This does NOT work
My package.json looks like this:
"dependencies": {
"express": "^4.17.1",
"vue": "^2.6.12"
}
So what am I missing in order to get the vue from the node_modules folder?
You don't use relative paths with node_modules.
Try using an import statement:
import Vue from 'vue'
new Vue({ el: '#app' })
Or better yet, use the Vue CLI and run vue create <project-name>. This way you can use Single-File-Components and all the scaffolding is handled for you.
Looking at the documentation for installing Swagger-UI one can see that two official npm modules are being published: swagger-ui and swagger-ui-dist. However, I really struggle to figure out how these are supposed to be used with an already existing OpenApi 3.0 specification.
The only thing I need is a simple web application (plain node.js or express.js or whatever works) which will serve my existing specification.yml document embedded into the plain Swagger-UI files on a path like /docs.
Since this needs to be done in a repeatable manner (will run in a Docker container in the end), manual editing of files is not desired in the process.
The closest I could get was downloading a release tar ball, extracting the dist folder, use tools like sed to replace the default specification file with my own one and finally host this on a webserver like nginx.
However, this looks unnecessary complex to me and makes me wonder what the npm modules are supposed to be used for.
Finally I found two approaches to achieve my goal as outlined in the question.
Using unpkg
unpkg is an automated content delivery network for all modules that are published on the npm registry. It allows to include and use any npm module in a static HTML file without any complex package managers, dependency resolvers etc. This is especially great if you don't have any other need to use the npm ecosystem directly.
For swagger-ui, such an HTML file would look like this. Note that we are importing the swagger-ui-dist package which already includes all necessary dependencies.
<!DOCTYPE html>
<!--Inspired by https://gist.github.com/buzztaiki/e243ccc3203f96777e2e8141d4993664-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist#3/swagger-ui.css" >
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#3/swagger-ui-bundle.js"> </script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUIBundle({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</body>
</html>
Host this HTML file on your webserver and your all settled.
Using browserify / webpack
browserify and webpack are module bundlers from the npm ecosystem that can collect an npm module and all its dependencies, then bundle them up in one single js file. This file can then be loaded and used in an HTML page.
While both tools might differ feature-wise in the details, for this job both of them work almost in the same way. The following example uses browserify, however, the general approach with webpack is the same.
First, install browserify globally:
npm install -g browserify
Then, install the swagger-ui module locally in your current folder:
npm install --save swagger-ui
Finally, bundle the swagger-ui module and all of its dependencies into a single output file:
browserify --require swagger-ui -o bundle.js
The according HTML page to include it could look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./node_modules/swagger-ui/dist/swagger-ui.css">
<title>Swagger-UI</title>
</head>
<body>
<div id="swagger-ui"></div>
</body>
<script type="text/javascript" src="./bundle.js"></script>
<script type="text/javascript">
window.onload = function() {
// Swagger-ui configuration goes here.
// See further: https://github.com/swagger-api/swagger-ui/blob/master/docs/usage/configuration.md
SwaggerUI({
deepLinking: true,
dom_id: '#swagger-ui',
showExtensions: true,
showCommonExtensions: true,
url: specification.json // <-- adjust this to your webserver's structure
});
};
</script>
</html>
This approach might be preferred if you are using browserify or webpack within your ecosystem for other tasks anyway.
If you are looking for whatever works the easiest solution will be to use an existing swagger-ui like the demo store and pass your spec in the url param:
http://petstore.swagger.io/?url=https://raw.githack.com/heldersepu/hs-scripts/master/swagger/4411/7.json
If you want more of a standalone solution copy the swagger-ui dist directory to your deployment:
https://github.com/swagger-api/swagger-ui/tree/master/dist
then tweak the index.html to suit your needs
I'm using meteor and I ran npm install request to get access to that library. Everything seems to install correctly but when I run the meteor server, I then get the following error. Is there any word on why this is or how to solve it? Thanks.
While building the application:
node_modules/request/node_modules/node-uuid/test/test.html:1: bad formatting in HTML template
node_modules/request/node_modules/form-data/node_modules/combined-stream/node_modules/delayed-stream/test/run.js:1:15: Unexpected token ILLEGAL
node_modules/request/node_modules/form-data/node_modules/combined-stream/test/run.js:1:15: Unexpected token ILLEGAL
For reference:
test.html
<html>
<head>
<style>
div {
font-family: monospace;
font-size: 8pt;
}
div.log {color: #444;}
div.warn {color: #550;}
div.error {color: #800; font-weight: bold;}
</style>
<script src="../uuid.js"></script>
</head>
<body>
<script src="./test.js"></script>
</body>
</html>
run.js (same)
#!/usr/bin/env node
var far = require('far').create();
far.add(__dirname);
far.include(/test-.*\.js$/);
far.execute();
Meteor constructs the entire DOM itself so it will typically reject any script tags included in the html (but it will include scripts in the head, thanks Andrew). It also only supports handlebars style templating (right now).
<html>
<head>
<title>Something</title>
</head>
<body>
{{>yourHandlebarsTemplate}}
</body>
</html>
My advice would be to have your js and css located as files inside the client folder under your projects root.
As for NPM request, you will not be able to:
install it normally like you do in most node projects, so node_module is out/npm install require is out
access the functions in it without a Npm.require
At this point you have two options: adding the package NPM from Atmosphere(unofficial package repository) and including request. Or try placing the lib into /packages/ and then using Npm.require('request').
Alternatively you can just use Meteor's built in HTTP package (meteor add http) which functions similar to request.
Remove from your template as it seems Meteor wants to create this tag for you when building the template. This should take care of the "bad formatting in HTML template" error in test.html.
As far as I have seen, there is no explanation as to where we are to locate the client side script for socket.io if node.js is not used as the web server. I've found a whole directory of client side files, but I need them in a combined version (like it's served when using node.js webs servers). Any ideas?
The best way I have found to do this is to use bower.
bower install socket.io-client --save
and include the following in your app's HTML:
<script src="/bower_components/socket.io-client/socket.io.js"></script>
That way you can treat the socket.io part of your client the same way you treat any other managed package.
socket.io.js is what you're going to put into your client-side html. Something like:
<script type="text/javascript" src="socket.io.js"></script>
my script is located:
/usr/local/lib/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js
copy that file to where you want your server to serve it.
I think that better and proper way is to load it from this url
src="/socket.io/socket.io.js"
on the domain where socket.io runs. What is positive on this solution is that if you update your socket.io npm module, your client file gets updated too and you don't have to copy it every time manually.
I used bower as suggested in Matt Way's answer, and that worked great, but then the library itself didn't have its own bower.json file.
This meant that the bower-main-files Gulp plugin that I'm using to find my dependencies' JS files did not pull in socket.io, and I was getting an error on page load. Adding an override to my project's bower.json worked around the issue.
First install the library with bower:
bower install socket.io-client --save
Then add the override to your project's bower.json:
"overrides": {
"socket.io-client": {
"main": ["socket.io.js"]
}
}
For everyone who runs wiredep and gets the "socket.io-client was not injected in your file." error:
Modify your wiredep task like this:
wiredep: {
..
main: {
..
overrides: {
'socket.io-client': {
main: 'socket.io.js'
}
}
}
If you are using bower.json, add the socket.io-client dependency.
"socket.io-client": "0.9.x"
Then run bower install to download socket.io-client.
Then add the script tag in your HTML.
<script src="bower_components/socket.io-client/dist/socket.io.min.js"></script>
I have created a bower compatible socket.io-client that can be install like this :
bower install sio-client --save
or for development usage :
bower install sio-client --save-dev
link to repo
if you use https://github.com/btford/angular-socket-io
make sure to have your index.html like this:
<!-- https://raw.githubusercontent.com/socketio/socket.io-client/master/socket.io.js -->
<script src="socket.io.js"></script>
<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- ...... -->
<script src="bower_components/angular-socket-io/socket.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script type="text/javascript" charset="utf-8">
angular.module('myapp', [
// ...
'btford.socket-io'
]);
// do your angular/socket stuff
</script>
I've been having this issue for the past couple of days and can't seem to get to the bottom of this. We doing a very basic node/express app, and are trying to serve our static files using something like this:
app.use(express.static(path.join(__dirname, "static")));
This does what I expect it to for the most part. We have a few folders in our static folder for our css and javascript. We're trying to load our css into our EJS view using this static path:
<link rel="stylesheet" type="text/css" href="/css/style.css">
When we hit our route /, we're getting all of the content but our CSS is not loading. We're getting this error in particular:
Refused to apply style from 'http://localhost:3000/css/style.css'
because its MIME type ('text/html') is not a supported stylesheet MIME
type, and strict MIME checking is enabled.
What I've tried:
Clear NPM Cache / Fresh Install
npm verify cache
rm -rf node_modules
npm install
Clear Browser Cache
Various modifications to folder names and references to that
Adding/removing forward slashes form the href
Moving the css folder into the root and serving it from there
Adding/removing slashes from path.join(__dirname, '/static/')
There was a comment about a service worker possibly messing things up in a github issue report, and seemed to fix a lot of people's problems. There is no service worker for our localhost: https://github.com/facebook/create-react-app/issues/658
We're not using react, but I'm grasping at any google search I can find
The route:
app.get("/", function(req, res) {
res.render("search");
});
The view:
<!DOCTYPE html>
<html>
<head>
<title>Search for a Movie</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<h1>Search for a movie</h1>
<form method="POST" action="/results">
<label for="movie-title">Enter a movie title:</label><br>
<input id="movie-title" type="text" name="title"><br>
<input type="submit" value="Submit Search">
</form>
</body>
</html>
The package.json:
{
"name": "express-apis-omdb",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "nodemon index.js",
"lint:js": "node_modules/eslint/bin/eslint.js ./ ./**/*.js --fix; exit 0",
"lint:css": "node_modules/csslint/cli.js public/css/; exit 0"
},
"license": "ISC",
"devDependencies": {
"babel-eslint": "^6.0.4",
"csslint": "^0.10.0",
"eslint": "^2.11.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.8.1",
"eslint-plugin-jsx-a11y": "^1.3.0",
"eslint-plugin-react": "^5.1.1"
},
"dependencies": {
"body-parser": "^1.18.2",
"dotenv": "^5.0.0",
"ejs": "^2.5.7",
"express": "^4.13.4",
"morgan": "^1.7.0",
"path": "^0.12.7",
"request": "^2.83.0"
}
}
The project structure:
-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json
Note: We are currently not using a layout file for our EJS.
I'm happy to provide additional details if needed.
The problem is the result of an improperly named file. Our student had a space at the end of the style.css file. There were a few tip offs to this, the first was a lack of syntax highlighting in the text editor, and the second was the text editor detecting the filetype for other newly created css files but not the improperly named file. Removing the space resolved the issue.
Thank you slebetman for your help in pointing me in the right direction.
In Nodejs app with express, we need to add the line like below to tell the server about the directory
app.use(express.static(__dirname));
This will solve the problem of CSS not rendering
This is not a solution for your question but this might help someone else searching for solution like me. if you use app.get like below:
app.get(express.static(path.join(__dirname,"public")));
change it to :
app.use(express.static(path.join(__dirname,"public")));
Extra Tip :
I have the same issue like this but my issue is when I try to render a static file from one level router path it working properly
Example: site.com/posts
But when I try to render static files from a route like site.com/posts/:id It's not working.
The solution is to add '/' beginning fo the href :
Wrong : <link href="css/bootstrap.min.css" rel="stylesheet">
Solution :<link href="/css/bootstrap.min.css" rel="stylesheet">
OP has posted the solution for his scenario.
For others, this error comes when the node server cannot find the stylesheet
file (or any file) in the specified path inside the app.use() middleware.
Example:
app.use(express.static(path.join(__dirname, "static")));
When you use the above middleware, the express server searches for the files from this (static/ in this case) directory.
If you have given the stylesheet path as:
<link rel="stylesheet" type="text/css" href="/css/style.css">
Then the express server will look in the path static/css/style.css.
If the file is not present here, the reported error will be thrown.
Though the answer has to do with a space in the file, I have another potential answer that also generates the same error code. I'm posting it here as it also brings up this common error that gets a lot of looks.
The alternative is the misplacement of the styles.css file. If it is not present where it is referenced, Chrome will spit out the same error code.
I've had an instance of the styles.css being in an express js's "public" folder but not in the actual "css" sub-folder in "public." (public was used as the static folder.)
If you use VS Code, your document view in the left pane has this weird visual display that can fool you into thinking the styles.css is in the "css" folder when in fact it is not. I only discovered the issue after using normal windows explorer and seeing the missplaced file. To fix, check and if missplaced, just put styles.css where it should be.
Hope this helps others too!
I had the same issue today. My file structure is in such a way that all static files have each their folder inside the public folder. The public folder itself is in the root directory. I tried using relative paths e.g ../public/css/index.css etc but no luck. Here is what I did.
const app = express();
app.use(express.static("public"));
With this, your app will look for static files inside the public folder. So assuming you have css and js files in there, you can directly reference them in HTML as below:
href="css/index.css"
src="js/script.js"