Run on http://localhost/ instead of the file:// scheme

[stereonom]

Hi.

I want to use the autosave extension for developing websites that aren't available via file:// because they use PHP.
I use MAMP as a PHP server.
The website now is available under http://localhost/index.php.
The files are available under /Volumes/test/index.php

I don't know how what 'Resource' and 'Post to' options to use for this scenario.

Thanks.

[NV]

What do you mean by The files are available under /Volumes/test/index.php?
Do you include CSS and JS inline?

[NV]

If http://localhost/* corresponds to /Volumes/test/* you should create a config file (say routes.js):

exports.routes = [{
    from: /^http:\/\/localhost\//,
    to: '/Volumes/test/'
}];

and then run autosave --config routes.js

I don't know how what 'Resource' and 'Post to' options to use for this scenario.

Change the resource field from ^file:// to ^http://localhost/
Default "Post to" should work.

[stereonom]

I mean that the files are on my file system.
The path is '/Volumes/test/index.php'. (this is a normal directory under MacOS)

The CSS and JS files are included via link attribute ()

[stereonom]

It works. Awesome!

Now I can edit css and js files directly on the server.
All I have to do is mounting the ftp-server as a local volume, start MAMP as a PHP-server, point the PHP-server and the node.js-server to the local Volume and edit the page with Chrome :-)

[NV]

Great! I'll close it then.

[jitendravyas]

this is my route.js

exports.routes = [{
from: /http://localhost//,
to: 'C:\Users\jitendra\Dropbox\htdocs>'
}];

but it's not working

[NV]

Looks about right. I need more details. What do you see in the terminal? What do you see in the extension log (how to open it)?

[jitendravyas]

It working now. I had to change

to: 'C:\Users\jitendra\Dropbox\htdocs>'

to this
C:/Users/jitendra/Dropbox/htdocs/

[jitendravyas]

It works with your example which is having link rel=stylesheet href=style.css" but in my case it's link rel="stylesheet" href="theme/a/css/default.css" so it's not working.

[NV]

It probably writes to some other file. Again, what do you see in the terminal?

[guusvandewal]

Hello,

I was wondering how to configure this on osx(10.6.8) when my path is localhost/~myname ... it gives this error:

DevTools Autosave 0.2.3 is listening on http://127.0.0.1:9104

ENOENT, no such file or directory '/Users/myname/Sites/~myname/example/style.css'

I guess I would have to delete ~myname after sites since it's working when I use the file:// methode.
But I don't know how to accomplish this. I've tried a lot allready.

Thanks in advance!

[NV]

How does URL for style.css look?

[guusvandewal]

Hi. Thanks for repyling.

From my browser:
http://localhost/~guus/example/style.css
On my Mac:
/Users/guus/Sites/example/style.css

I've tried this, among many others, for resource:
http://localhost/~guus/example/style.css

Terminal
mac:~ guus$ autosave
DevTools Autosave 0.2.3 is listening on http://127.0.0.1:9104
Output background.html without routes.js:
URL (http://localhost/~guus/example/style.css) doesn’t match RegExp /^file://[^/]*//

Terminal
mac:~ guus$ autosave --config routes.js
DevTools Autosave 0.2.3 is listening on http://127.0.0.1:9104
Output background.html with routes.js
ENOENT, no such file or directory '/Users/guus/Sites/~guus/example/style.css'

[NV]

routes.js:

exports.routes = [{
    from: /^http:\/\/localhost\/~/,
    to: '/Users/'
}];

[guusvandewal]

Great, after some fiddling it now works, I used it to test with Drupal and it works like a charm. Thank you so much.

In Chrome -> Extensions -> Autosave -> Options
Resource: ^http://localhost/
Post to: http://127.0.0.1:9104/save

In routes.js //which is in my 'Home path' /Users/guus/routes.js

exports.routes = [{
from: /^http://localhost/~guus/,
to: '/Users/guus/Sites/'
}];

[Twanneman]

What should I do when I want to edit e.g. 'http://localhost/testsite' located in '/Users/twan/Dropbox/sites/testsite' ?
I've got it working but only in the root folder of my localhost.

my routes.js file is located in '/Users/twan/Dropbox/sites/' and contains the following code :
exports.routes = [{
from: /^http://localhost//,
to: '/Users/twan/Dropbox/sites/'
}];

In google chrome preferences > extensions > autosave > options I've set
resource : ^http://localhost/
post to : http://127.0.0.1:9104/save

I'm running MAMP on Mac OS X 10.7.2

[Twanneman]

never mind, i fixed it! woohoo :)

In the file you edit you have to include the following line inside your head

<script> <script src="_js/autosave.js?sha=1a2c7a6b8c3cbf6f"></script> </script>

the autosave.js contains the following code:

'use strict';

window.addEventListener('load', function(event) {
    document.body.className += ' loaded';
    document.body.addEventListener('click', function(event) {
        console.log('click', event);
    }, true);
}, false);

[NV]

No, you don’t have to include this file. It’s just an example used for screencast.

[gerrit]

To get this to work for me, I had to add a rule in the extension options for ^http://localhost
Any chance you could ship with default rules for localhost, 127.0.0.1 and 0.0.0.0 so adding a routes.js is enough to get autosaving to work when using a local server?

[NV]

This is a good idea. Although, my current goal is to eliminate the server. It would make all these irrelevant (and drastically simpler).

[apaulfx]

Wow this is really cool,
It may be a rather noobish request but could anyone that got this to work locally with Mamp possibly put together a video tutorial as to how this was installed? Setting this up would be incredibly informal and beneficial.

[mkhatib]

Any idea how to setup this to work with Rails Assets Pipeline files knowing that here are multiple assets in multiple folders?

[pingram3541]

would be nice to do something like this for a live server since I use a development sandbox with my host rather than loading down my local workstation with ported server apps.../apache/php/mysql. Am I missing something or am I correct in local server only?

my host won't let me run but a few types of cron jobs since my dev server is shared, but couldn't a scripted version developed and be included in the html somehow? i.e. put autosave.js or autosave.php on your server and call/reference it in your < head > area ?

I use a php file browser/editor that let's me update files on my hosted server much like my cpanel file manager. ...eXtplorer which works great but my workflow now is using that in one tab while my dev tool'd page is open in another.

[pingram3541]

Is there a way to call a routes.js that creates a connection to my hosted server? I would imagine ftp to be kind of slow for an autosave however...I'm sure a manual sync option like CSSUpdater would suffice but a quick autosave is even sweeter!

Eagerly awaiting some input on this as I can't be the only one interested in this method.

[NV]

@mkhatib I haven’t done it before, but I’ll try to figure it out. I’ve made a separate issue #27.

[NV]

@pingram3541 brief instructions would be:

1. run autosave on the server.
2. You have to make autosave server accessible to the browser, e.g. forward server’s 127.0.0.1:9104 to some URL. You might want to create a separate host, e.g. http://my-devtools-autosave.dev/. To do so, you need to configure forwarding in your HTTP server such as Apache, nginx or lighttpd.
3. Change "Post to" field in the extension’s options to the new one, e.g. http://my-devtools-autosave.dev/save.

[pingram3541]

Would it be possible to get a general how to on setting this up with my host as a cron job? Is that possible?

[NV]

I don’t see why do you need a cron job at all. You might want to run Autosave on a system launch. On Linux you’ll need to create a script in /etc/init.d that runs autosave as a daemon.

[pingram3541]

Because my server is not local, it's a shared host @ justhost.com for like $3 per month but it works fine for my blog and dev environment. Doesn't devtools autosave require the node.js to be installed on the server and the autosave script run from the server's command line? Am I really missing something? I am a bit under-slept. =)~

[NV]

There are two options:

• Run Autosave on the server. It does require node.js to be installed on the server and the autosave script run from the server's command line.
• Run Autosave locally and sync changed files. You can sync using either:
  • SSHFS. The most common option here. Props: easy to setup and syncs transparently. Cons: you might loose changes when a server connection fails.
  • rsync. Props: you won’t lose any changes on the connection fails. Cons: does one way syncing only. It’s a bit harder to setup, requires reading man rsync.
  • Unison or bitpocket. These are the same as rsync but sync both ways. I haven’t much tried them.

[pingram3541]

So if my host restricts SSH access to the server do I have any other options? I also use a windows workstation and rsync was the only client that looked like something I could use, granted my host allowed SSH access but again, it's a shared server so they are very restrictive.

[NV]

All I mentioned above applies to SSH, but you can mount a disk using Samba or (probably) FTP as well.

[pingram3541]

Found a free ftp sync program called bestsync which works pretty quickly...and syncs the changes both ways...

[jbpapp]

I'm running autosave with custom config file.
It looks like this:

exports.routes = [{
    from: /^http:\/\/localhost\//,
    to: '/var/www/'
}];

My files are under /var/www/*
However, I can't make it work. Could you help me please?