Giter VIP home page Giter VIP logo

Comments (34)

NV avatar NV commented on May 19, 2024

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

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

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.

from chrome-devtools-autosave.

stereonom avatar stereonom commented on May 19, 2024

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 ()

from chrome-devtools-autosave.

stereonom avatar stereonom commented on May 19, 2024

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 :-)

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

Great! I'll close it then.

from chrome-devtools-autosave.

jitendravyas avatar jitendravyas commented on May 19, 2024

this is my route.js

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

but it's not working

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

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)?

from chrome-devtools-autosave.

jitendravyas avatar jitendravyas commented on May 19, 2024

It working now. I had to change

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

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

from chrome-devtools-autosave.

jitendravyas avatar jitendravyas commented on May 19, 2024

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.

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

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

from chrome-devtools-autosave.

guusvandewal avatar guusvandewal commented on May 19, 2024

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!

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

How does URL for style.css look?

from chrome-devtools-autosave.

guusvandewal avatar guusvandewal commented on May 19, 2024

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'

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

routes.js:

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

from chrome-devtools-autosave.

guusvandewal avatar guusvandewal commented on May 19, 2024

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/'
}];

from chrome-devtools-autosave.

Twanneman avatar Twanneman commented on May 19, 2024

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

from chrome-devtools-autosave.

Twanneman avatar Twanneman commented on May 19, 2024

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);

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

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

from chrome-devtools-autosave.

gerrit avatar gerrit commented on May 19, 2024

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?

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

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

from chrome-devtools-autosave.

apaulfx avatar apaulfx commented on May 19, 2024

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.

from chrome-devtools-autosave.

mkhatib avatar mkhatib commented on May 19, 2024

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

from chrome-devtools-autosave.

pingram3541 avatar pingram3541 commented on May 19, 2024

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.

from chrome-devtools-autosave.

pingram3541 avatar pingram3541 commented on May 19, 2024

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.

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

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

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

@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.

from chrome-devtools-autosave.

pingram3541 avatar pingram3541 commented on May 19, 2024

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

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

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.

from chrome-devtools-autosave.

pingram3541 avatar pingram3541 commented on May 19, 2024

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. =)~

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

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.

from chrome-devtools-autosave.

pingram3541 avatar pingram3541 commented on May 19, 2024

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.

from chrome-devtools-autosave.

NV avatar NV commented on May 19, 2024

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

from chrome-devtools-autosave.

pingram3541 avatar pingram3541 commented on May 19, 2024

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

from chrome-devtools-autosave.

jbpapp avatar jbpapp commented on May 19, 2024

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?

from chrome-devtools-autosave.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.