This will give you a JSON object where we can setup the FTP connection, I made a couple changes to this, the following should work: , Next I'll setup the FTP connection for my site:Ĭtrl+Shift+P to open the command prompt and then type SFTP and click to init. ![]() You may later find you have to save twice if it didn't update the first time, if you run into this a lot you could try increasing this setting.Īlso if you want to work with sass/scss files, you'll need to add these to LiveReload's list of file extensions, find livereload.exts and add ,scss after css.Īlso if you want the scss changes to work like css changes without a full page reload, for other editors there may be a setting but in vs code I forked the repo to build a version that does this for scss files too: - hope to have this merged to the main extension soon. This is a short half second delay that shouldn't be too noticeable but should also give ftp enough time to upload the file. In the settings UI (Ctrl+Shift+P and type settings) search for layForUpdate and enter 500. With these installed I'll setup my site's livereload to have a delay. Then, i'm using Chrome as my browser so I've installed the LiveReload extension for Chrome: & i've installed the LiveReload extension for VSCode too: In VSCode we can find & install extensions by pressing Ctrl+Shift+P and typing install and then finding the package in the list, or by clicking the extensions link on the left side menu.įor FTP in VSCode i'm using the SFTP extension: Here's an example of this using VSCode (a free code editor), but should work the same in any other editor (such as Atom or Sublime - you'll need to find the relevant extensions for those editors) or if these don't work for you, you could look into a desktop app such as though those tend to be paid while the editor ones are generally free. This can even work over ftp by setting a short delay in your livereload extension. When you save html/template or js files, your browser will auto reload to show the new changes, while css changes are auto applied live into the design without reloading - as if by magic ). LiveReload is a way to have your code changes live refresh in your browser.Į.g. Live_reload will match files in the sibling application.LiveReload with FTP Home Subscribe LiveReload with FTP 06 March 2019 on REC, Responsive, Design You'll also want to be sure that the configured :patterns for expand ( ) config :phoenix_live_reload, :dirs, ), Path. :phoenix_live_reload to trigger page reloads: # in config/dev.exs root_path = _ENV_. In an umbrella app, if you want to enable live reloading based on codeĬhanges in sibling applications, set the reloadable_apps option on yourĮndpoint to ensure the code will be recompiled, then add the dirs to Useful when class names are determined at runtime, for example when Page reload like other asset types instead of the default hot reload. :reload_page_on_css_changes - If true, CSS changes will trigger a full You can do so with the :suffix option: live_reload : Īnd then configure the endpoint to use the same suffix: if code_reloading? do socket "/phoenix/live_reload/socket/proxied/app/path",. ![]() You may want to give a different suffix to each socket connection. :suffix - if you are running live-reloading on an umbrella app, :url - the URL of the live reload socket connection. :target_window - the window that will be reloaded, as an atom. Expects a keyword list of atom keys and string values. :iframe_attrs - attrs to be given to the iframe injected by :debounce - an integer in milliseconds to wait before sending live_reload : [ patterns : [ ~r will beīroadcast on the topic whenever file in the list of patterns changes. Key of your endpoint, such as this: config :my_app, MyApp.Endpoint. In your Endpoint, ie: if code_reloading? do socket "/phoenix/live_reload/socket", plug Phoenix.CodeReloader plug Phoenix.LiveReloader endĪll live-reloading configuration must be done inside the :live_reload ![]() Router for live-reload detection in development.Īdd the Phoenix.LiveReloader plug within a code_reloading? block Settings View Source Phoenix.LiveReloader (Phoenix Live-Reload v1.4.1)
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |