I just started looking into using fabric.js, and I'm finding very little resources on how to install it in my site. All I can find is a single stack overflow question that references the file "all.min.js", which upon a quick search of the unzipped file no longer exists.
I've scoured the internet for the past few hours, and it's looking like it is supposed to be common knowledge! I'm still stuck though.
Which file should I link to in my HTML?
Edit: Just to clarify, I downloaded a large ZIP file off fabric.js's github. I was confused as to which file I should link to to include the library.
A more modern fabric.js hello-world using webpack (state of 2018)
Advantages of this method
fabric.js does not need to be committed to version control
Given that all dependencies are in package.json only two commands are required to get up and running from scratch with your project: git clone <url> and npm install
Updating to the latest fabric version is as easy as running npm update
Not only the fabricjs code, but also your own code will be minified.
and it gives you all other goodies provided by webpack
Assumptions
This assumes...
... that you have the NPM >= 5.2 (if I recall correctly, this is needed by webpack).
... that you have access to a CLI shell to run the npm and webpack commands.
... that the npm binaries are on your path. By default: $HOME/.local/bin on *nix systems
NOTE: You will not need superuser/root access to the system if you already have npm available.
Preparations
First, initialise a new npm project:
mkdir my-fabric-project
cd my-fabric-project
npm init -y
Then install webpack into that folder (we will need this for later):
npm install webpack webpack-cli --save-dev
Also, install fabricjs as this is our dependency for our project:
npm install --save fabric
The two npm install commands above will populate our package.json file containing production (fabricjs) and development (webpack & webpack-cli) dependencies.
NOTE: When installing webpack, I got errors regarding cairo at the time of this writing. But it seems they are harmless. cairo is a graphics library and I assume this is only needed if you want to run fabricjs in a nodejs process. Browsers are already capable of rendering graphics so when running fabricjs in client-side code this is a non-issue. Otherwise you may need to install required headers. I assume (not tested) that this error can be solved by installing the package libcairo-dev on debian-based systems.
The Code
Now we have everything ready to get coding.
Create two folders src and dist, so our source tree becomes:
.
├── node_modules
| ├...
| └── ...
├── dist
├── package-lock.json
├── package.json
└── src
2 directories, 2 files
Create a HTML file index.html inside the dist folder with the following contents:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World FabricJS</title>
</head>
<body>
<canvas
id="myCanvas"
width="400"
height="400"
style="border:1px solid #000000;">
</canvas>
<script src="main.js"></script>
</body>
</html>
And also a javascript index.js in the src folder with the following contents:
import {fabric} from 'fabric';
function run() {
let canvas = new fabric.Canvas('myCanvas');
let rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
}
run();
This will give us the following directory structure:
.
├── node_modules
| ├...
| └── ...
├── dist
│ └── index.html
├── package-lock.json
├── package.json
└── src
└── index.js
2 directories, 5 files
You may notice that dist/index.html references a file called main.js which does not exist. We need to run webpack to create it:
npx webpack
Your code should now work. Either open dist/index.html manually, or run a mini-web server from the console to test:
(cd dist && python3 -m http.server)
That's it!
This should get you started with your project and also allow you to leverage the power of webpack to easily split your code. Good luck & Have fun!
Good To Know
The filenames dist/main.js and src/index.js are the defaults when running webpack without a config
webpack will create minified code in dist/main.js by default. This is because it runs in "production" mode by default. To change this, create a file named webpack.config.js with the following contents:
module.exports = {
mode: 'development'
};
You can use it running:
npx webpack --config webpack.config.js
All you need to do download the fabric.js from HERE and save it as js file named fabric.js, and create the html file suppose index.html with below content.
To run this example, these both fabric.js and index.html should be into one folder.
<html>
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
</script>
</body>
</html>
Option
You can download fabric.js in any format from HERE
Fabric follows a pretty traditional distribution layout.
You want to use files from the dist directory. fabric.js for development work and fabric.min.js for the live site.
Related
Everything I've tried already didn't work for me (several sites and videos on youtube). Please, link me with another useful videos or help me understand this process. I found it much easier to deploy the site to GitHub with gh-pages, but I have problems with deploying to GitLab.
Already tried to push my project to GitLab and then CI/CD > Pipelines, where my project built successfully, then Settings > Pages and still 404 (waited more than 1 day). I have installed the ".gitlab-ci.yml" file (with basic HTML settings).
BTW, should I push the pre-built site or already converted?
Right now it is like this:
- src
- fonts
- html
- images
- js
- sass
index.html
.gitattributes
.gitignore
.gitlab-ci.yml
LICENSE
README.md
EDIT: I found solution for my specific problem. As GitLab Pages is a static hosting, before deploying sass files, you need to compile them first and only after you should deploy.
Here is my gitlab-ci.yml file.
image: alpine:latest
stages:
- compile
- deploy
compile:
stage: compile
image: node:8.15-alpine
script:
- yarn global add node-sass
- node-sass ./src/sass/main.scss ./src/css/styles.css --style compressed
only:
- master
artifacts:
paths:
- ./src/css
pages:
stage: deploy
script:
- mv src/ public
artifacts:
paths:
- public
At stage compile notice how i point to my main.scss file path which could be different for you. Also there is path for compiled file styles.css (you need to use your file name of css styles, that is mentioned in <head> section of your main html file). Check path at the artifacts line as well, so you could properly direct your files. For compilation, as you can see, i'm using Yarn (there is no need to install anything to use it). After compiling my sass file, the next stage is to deploy, which works for me as planned.
Hope it helps you as well!
To successfully host your page on Gitlab you need to move your sources to public directory and archive it. Example .gitlab-ci.yml could be:
image: alpine:latest
pages:
stage: deploy
script:
- mv src/ public
artifacts:
paths:
- public
Started learning Bower and Gulp. I have app directory where I will do my development and a dist directory where the final project will live ready to go out to the world.
In my app directory I have installed chart.js through bower and therefore it is in a folder called bower_components/chart.js.
In my index.html file I have a link to Chart.js as:
<script type="text/javascript" src="bower_components/chart.js/Chart.js"></script>
In my distribution I want this to be in my javascript folder
<script type="text/javascript" src="js/Chart.js"></script>
How do I automate changing the location of the Chart.js file in Gulp?
I imagine this is a general requirement considering your distribution file structure is different to your development file structure.
With being able to have the bower_component folder outside of the app folder, how would it be possible to load the bower packages to work with gulp? The plan is to use Web Starter Kit that has gulp, browser sync already set up.
I think the set up will be to move the bower modules, with gulp - that has the task to copy the specified modules over to app/scripts/vendors or app/styles/vendors. So it will run two tasks (one for scripts and one for styles).
It will copy it over, and if newer updates were downloaded - replace the existing files. Concat and Minify no matter if serving or building.
Since WSK already builds a main.js, the bower packages will be built into a library.js file. Can someone guide me in the right direction to build this setup?
I've attached a few things I think the setup will need.
app/index.html
<!-- build:js scripts/vendor.js -->
<script src="bower_components/angular/angular.js"></script>
<!-- endbuild -->
Build into /dist/scripts/venfors.js
gulpfile.js
// Bower - bower_components directory - located to root folder
var directory = {
bower = './bower_components/'
};
// Bower - Scripts
gulp.task('bower-scripts', function() {
return gulp.src([
// AngularJS
directory.bower+'bower_components/angular/angular.js'
])
.pipe( --- Copy src to /app/scripts/vendor --- )
});
Not sure if there is there is anything more I need to do? Or if my setup is incorrect?
Reason why I want to keep the bower_components folder in the root folder NOT the app folder is to keep everything cleaner.
Brief: Gulp and WSK setup using bower, with bower_components folder outside of "App" folder.
So, I believe this should help others:
What we are doing is copying over the packages over from bower_components folder in the root folder to our app scripts folder.
// Bower - Scripts
gulp.task('bower-scripts', function() {
var directory = { bower : './bower_components/' };
return gulp.src([
directory.bower+'**/*.min.js'
])
// Output Files
.pipe(gulp.dest('app/scripts/vendor'))
});
When we rung gulp serve, we need to add the bower-scripts task as a dependency to our serve task
In index.html, specify the bower package you want to use like so:
<!-- build:js scripts/library.min.js -->
<script src="scripts/vendor/angular/angular.min.js"></script>
<!-- endbuild -->
Than when you run gulp (to build) or gulp serve (to test) - everything should fall into place.
If you can streamline this - or make it more efficient, than drop a line!
So the question is pretty much explained in the title. Suppose that I have the following directory structure:
./index.html
./_includes/include1
And that the content of index.html is:
<!DOCTYPE html>
<html>
<head>
<title>Test page for inclusions</title>
</head>
<body>
{% include include1 %}
</body>
</html>
Is there any way to get the index.html rebuilt when the include1 file is changed?
Edit: Just to clarify, index.html is regenerated when index.html is changed, I want to know how to also get the page regenerated when something that it depends on changes, in this case the include1 file from the _includes/ directory.
And, in case it is important:
$ jekyll --version
jekyll 1.0.3
$ ruby --version
ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-darwin12.4.0]
My _config.yml:
$ cat _config.yml
timezone: Europe/Amsterdam
That is, for the most part I am just running with the defaults, which seems to work, since it knows where to find the include1 file.
Using the --watch command should automatically update your site when anything in your directory changes. It even updates the server when you create a new file.
Make sure that you're in your project's directory not im your _site directory. Your projetc dir should look like this:
_layouts
_includes
_site
_posts
.. Anything else
If for some reason the --watch command doesn't updatethe server you can always do the jekyll build command on your project directory.
What platform with what version of ruby are you using?
I wrote a game with HTML5. Locally, it only works if I run:
python -m SimpleHTTPServer
And then I open localhost:8000. So, just a bunch of .html and .js files won't work. I want to put my game online and because of this Github (Pages) is out of question, because it won't work.
This is the part of the code I need a server for (I do realize that localhost:8000/res/ won't work on App Engine, I'll need to change the address):
var mapFile = new XMLHttpRequest();
var self = this;
mapFile.open("GET", "http://localhost:8000/res/map" + mapNumber.toString() + ".txt", true);
mapFile.onreadystatechange = function() {
if (mapFile.readyState === 4) {
if (mapFile.status === 200) {
self.lines = mapFile.responseText.split("\n");
self.loadTilesFromLines();
}
}
};
mapFile.send(null);
So, I heard that Google App Engine would work, it supports Python and is very popular. Now, I don't need anything like what they have in their documentation (which is pretty well-written):
import webapp2
class MainPage(webapp2.RequestHandler):
def get(self):
self.response.headers['Content-Type'] = 'text/plain'
self.response.write('Hello, webapp2 World!')
app = webapp2.WSGIApplication([('/', MainPage)],
debug=True)
All I need is a SimpleHTTPServer that allows me to open my index.html on my-app.appspot.com.
I did try the example and got it up and running, but I can't force my browser to open index.html or src/ or even res/.
So, I am not even sure if Google App Engine supports what I'm trying to achieve here. The documentation just focus on building applications that use Python and all I needed with Python was a SimpleHTTPServer, which I don't think I need with App Engine.
Yes it is very doable on what you're trying to achieve here. Since you just want to serve static files it is very simple and you don't need to include any Python code.
Let's assume that you have this following structure:
└── my-game
├── app.yaml
└── static
├── index.html
├── js
│ └── script.js
└── res
└── map.txt
This app.yaml should look like this:
application: my-app
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /
static_files: static/index.html
upload: static/index.html
- url: /
static_dir: static/
After you're going to install the Google App Engine SDK (if you didn't do that already), you will be able to run the dev_appserver.py command from your terminal. If you have the above structure try to run it using the following:
$ dev_appserver.py /path/to/my-game
If everything went smoothly you'll be able to see your index.html on http://localhost:8080, the map.txt on http://localhost:8080/res/map.txt and you should be able to figure out the rest.
Note that you could still run your application using the python -m SimpleHTTPServer from within the static directory and test it on localhost:8000.