I have a developed gulp file with both browser-sync and live reload. this gulp file works perfectly for my requirements. for the base idea, I have a root folder in my Apache server and inside it I have my project folders.
--public
---proj1
---proj2
I'm using my gulp file to watch and build project folder and live reload.
currently I'm using browser-sync:
browserSync.init({
proxy: {
target: "localhost/newTest/public", // can be [virtual host, sub-directory, localhost with port]
ws: true // enables websockets
}
});
every changes done inside the 'public' folder, will affect the live reload. if I have opened both projects in two separate windows and do some changes on one project both windows are refreshing(live-reloading). I do not need that to happen. only one window should be live-reloading. how can I do it.
reason:
I want to implement this to server side level for many users, how can I do it? A change from a user should not affect other users.
Related
I'm making a website that I used to edit directly online on Neocities, but due to some problems, I'm looking to switch my editing to local offline. But I can't make my links point correctly to their targets, such as the favicon or my css files because locally, "/" doesn't point to the root.
Is there any program that allows me to set a folder as the root directory so these links can point properly? I'm currently trying Notepad++ but I haven't found a way to do so.
I know I could put the full path as "C:\folder\folder\file.css" for examle, but that would mean I'd have to edit the html of every single of my many pages and then re-edit them when I upload them online, and that's very undesirable. I need a way to preview the html locally without changing any paths, so my favicon link, for example, which currently is href="/favicon.png" can stay unchanged on all the pages. I could remove the "/" but then it wouldn't work for any pages within subfolders, and there's a lot of those in my project.
It's possible that I'm just missing some simple detail but I'm really just very much a beginner to making websites in general.
You can run a local web server to serve the contents of your root directory at a domain like http://localhost:8080. So rather than opening index.html in the browser you visit that URL instead.
There are a bunch of simple web servers you can use - my favourite for purposes like this is the NPM package http-server. It requires Node to be installed.
Install node
Install http-server by executing npm install -g http-server in your Terminal
Run the http-server by navigate to the website root folder and run http-server in your Terminal
http-server will produce an output that will tell you where to access the site.
Starting up http-server, serving ./
http-server version: 14.1.0
Available on:
http://127.0.0.1:8080
http://localhost:8080
Hit CTRL-C to stop the server
I am about to learn ReactJS.
I want to hide the filesystem structure of my server and only show the project root.
If i go to inspect tools in google-chrome i can see where my project is located on my C: Drive.
Wasnt able to find something about it and Ive got no Idea.
Hopefully, someone can help me.
This is because you are using your computer as a server to serve your site so the inspect tools are able to recognize the origin of the code, assets, and images.
Locally, even using gatsby develop or gatsby build (and gatsby serve) you will always be able to see the root of your project, it happens with all web development files, not only in Gatsby.
In a real scenario, where it's a server (with a domain attached, not your PC) that serves the files you will never see the origin because your site will be placed in the /public or /www of your server. To prepare your project to be deployed, you should run gatsby build command, which will create a /public folder in the root of your project with your code compiled, that folder is the one that needs to be deployed.
This is normal in development environment, for deploy your project try one of these approach in root of you project:
npm build
or
yarn build
This command build an optimized version of your project in build folder, after you can upload content of this folder to your www/plulic folder of your server,
Short Question Version
Changes to files happen below a target directory. I have browsersync setup like this:
var bs = require("browser-sync").create();
// Start the browsersync server
bs.init({
server: './target'
});
bs.reload("*.html");
However this is not detecting changes that occur in target subdirectories and refreshing the browser. Seems that the above lines are not enough?
Long Question Version
I have built a CLI. It watches for CSS changes in src/main/css and compiles the CSS (Using PostCSS) to target/main/css. The same is enabled for html templates in src/main/html.
Gaze watches for file changes and runs the functions that performs the compiling and this part works fine.
The full source code can be seen here.
I was hoping BrowserSync would pickup on the file changes in the target directory and refresh the browser when edits are performed, however I'm not seeing any refreshes. I have BrowserSync setup like this within the serve command:
var bs = require("browser-sync").create();
// Start the browsersync server
bs.init({
server: './target'
});
bs.reload("*.html");
The CLI can be tested by doing:
git clone https://github.com/superflycss/cli
cd cli
npm i -g
Or just install from NPM:
npm i -g #superflycss/cli
Then run:
sfc new project
cd project
sfc serve
The target folder will open up in the browser. Change the URL to http://localhost:3000/test/html/. Edit the html in src/test/html/index.html. The changes compile to target/test/html/index.html and BrowserSync should pickup on the changes IIUC...but it's not...
Thoughts?
It's pretty obvious, but bs.reload("*.html"); has to be called from within the on event of the watcher. So in other words whenever there is a file change call bs.reload("*.html");.
Since I'm using gaze to watch for file changes, I ended up doing this:
gaze(PLI.SRC_MAIN_CSS, (err, watcher) => {
if (err) {
log('error', 'Error buliding src/main/css/ content.');
throw new Error(err);
}
/**
* Triggered both when new files are added and when files are changed.
*/
watcher.on('changed', function (filepath) {
buildMainCSS();
bs.reload("*.html");
});
});
I'm using BrowserSync with Gulp to live reload a site in a local machine when specific kinds of files are changed. I've the following snippet in my gulpfile:
gulp.task('browser-sync', function() {
browsersync.init({
proxy: "mySite:8080",
files: ["./*.html", "dev/*.css"]
});
});
When changing (and saving) any of the above kinds of files, I get an output like this in my terminal:
[BS] Serving files from: ./
[BS] Watching files...
[BS] File changed: index.html
[BS] File changed: dev\styles.css
All the while, the site reloads as expected, but its content does not reflect the changes that were made. I can't figure out what am I doing wrong here. Any hint appreciated!
UPDATE
I forgot to mention that my host machine is running Windows 10 and my guest machine is running Ubuntu 14.04.4 LTS. The VM provider is VirtualBox.
Initially, I was using the default config.vm.synced_folder method. I had this on my vagrantfile:
config.vm.synced_folder "/Path/To/My/Host/Website/Folder/", "/usr/nginx/html/mywebsite/"
I've since tried using NFS, with the following configuration:
config.vm.synced_folder "/Path/To/My/Host/Website/Folder/", "/usr/nginx/html/mywebsite/",
:type => :nfs,
:mount_options => ['nolock,vers=3,udp,noatime,actimeo=1']
Since my host is running Windows, I installed the plugin vagrant-winnfsd, which adds support for NFS. But now vagrant halts when it tries to mount the NFS shared folder.
In addition, since I was getting the following error on vagrant up: GuestAdditions versions on your host (5.0.16) and guest (4.3.36) do not match, I installed the plugin vagrant-vbgues, in order to keep VirtualBox Guest Additions up to date. At no avail either. Vagrant is still freezing when it tries to mount the NFS shared folder.
The title and the tags say you're using Vagrant, even though it's not mentioned in your question.
Make sure your changes are being synced to the VM. Have a look at the vagrant documentation to select the type of synced folders that will work for your situation. Their basic example is as follows:
Vagrant.configure("2") do |config|
# other config here
config.vm.synced_folder "src/", "/srv/website"
end
You can vagrant ssh and check the files manually to make sure they match, and that the synced folders are working as expected.
UPDATE
Based on the new information and comment, I would recommend using rsync as the shared folder method.
config.vm.synced_folder "Host/Path/", "/Guest/Path", type: "rsync",
rsync__exclude: [ '.git', 'logs'],
rsync__args: ["--verbose"],
rsync__chown: false
I have never found a way to make NFS play well (and perform well) if Windows is in the mix.
It so happens that the problem was related with VirtualBox, as explained here. Since I'm running Nginx on a virtual machine in VirtualBox, the solution to my problem was to comment out the sendfile directive in nginx.conf, or simply set it off, like this:
sendfile off;
The same issue is reported here, and here. As well as in the Vagrant docs, which state that "There is a VirtualBox bug related to sendfile which can result in corrupted or non-updating files."
I have this structure for my project:
Root Directory
|-css folder
|-style.css
|
|-it folder
|-index.html
If I try to include css file with:
<link href="/css/style.css" rel="stylesheet" type="text/css"/>
from index.html, aptana preview and also internal server can not find style.css.
Why is this?
In my remote server it works perfectly and I do not want to use a relative path.
In terms of the "why", the problem you are having is related to how your development server is setup versus your production server.
Assuming a standard setup, your production server will receive requests for a domain (i.e., http://mysite.com) that is, for lack of a better word, mapped to a folder on your server (i.e, a request to http://mysite.com will be mapped to a folder, /var/www/mysite, on your server).
So, when you link to a style sheet with /css/style.css, your (production) sever immediately goes to the /var/www/mysite folder and starts looking for the css folder, file and so on. No problems with that, as you point out.
Your development machine, however, is serving up pages locally and has a different directory structure for mapping to files and folders.
When I open an HTML page in my Aptana project and hit the preview button, Studio loads http://127.0.0.1:8020/mysite/public/404.html (note how the first folder after the IP and port is mysite). To load the absolutely pathed CSS file, the local server is actually looking for http://127.0.0.1:8020/css/styles.css but it needs to get to http://127.0.0.1:8020/mysite/css/styles.css.
The initial "/" in your link (/css/styles.css) tells the server to go to the root directory of the server and start looking for the folder and files from that point ... but there is no css folder in the local server's root directory. It lives in /mysite/css/styles.css and that's why fskreuz suggests relative paths and using "../css/styles.css" instead.
Personally, I prefer absolute links (but that's just a personal preference and not in any way a challenge to or comment upon fskreuz's response). However, my local development setup is conducive to using them because I setup virtual hosts for the sites I work on. Using Apache, I setup a virtual host for each of my projects. With this, I can load something like http://dev.mysite.com in any browser on my computer and test my site/app in a way that makes it mirror my production setup.