annavue.blogg.se

1. #DEV LIVERELOAD ATOM HOW TO#
2. #DEV LIVERELOAD ATOM UPDATE#
3. #DEV LIVERELOAD ATOM CODE#
4. #DEV LIVERELOAD ATOM PROFESSIONAL#

assign the src attribute to the livereload serve Let script = document.createElement('script')

#DEV LIVERELOAD ATOM CODE#

To make Livereload working, we can use a simple trick and add some code to or web part or extension, and this is the complete magic. They are, in many ways, less optimal if you like to test and develop a web part under real-life conditions. It lives on the SharePoint Online workbench (/_layouts/15/workbench.aspx) and reloads the page in case a code change happen.īoth local and remote workbench are great tools and support dynamic reloading.

#DEV LIVERELOAD ATOM HOW TO#

How to get this script running on SharePoint OnlineĪs security and performance pre-caution this script does not exist on SharePoint pages. That then forces all connected clients (local workbench) to refresh. Once gulp has completed its job a gulp task to reload the page sends a request to this web socket service.

This script automatically sends a hello to the service backend and waiting for new messages from the backend. The local workbench opens a connection to this HTTP Service through a script that registered on the local workbench page. When the build rig starts it registers itself as an HTTP service on the port 35729. Livereload is part of the local build rig. Similar to a chat server does, but in this case, it can also send around more advance commands and action.įor example, please re-register a new version of CSS on a page (works without browser refresh) or refresh the whole browser window after the code got re-compiled. This server that passes information around. So one or multiple web sites and browser register to a web socket backend server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply. The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user’s browser and a server.

#DEV LIVERELOAD ATOM PROFESSIONAL#

There are professional tools like my favourite – Browsersync and other countless community-driven.Īll these solutions use the WebSocket API. Live-reload is one of the essential tools in the quiver of any web front end developers.

Live-reload aka reload website once the code compilation finishes

This solution is not only for development but also for a production compilation of a SharePoint web part or extension. Is it possible to use live-reload when I developed a web part on SharePoint Online? I had to search for an answer for that and guess what? I found a solution. What is the key to being an efficient programmer? Having a setup where you can write and test your code over and over in an uninterrupted flow.While working on a small side project on a Sunday, I asked myself the question. The cost of doing just one more tweak to make the code perfect should be as close to zero as possible. The developer should not feel any drain when doing just one more test to ensure everything is absolutely correct. The experience should be fast and friction-less. I always try to set up my development environment in a way that I can write code in one window, and immediately see the result in another.

#DEV LIVERELOAD ATOM UPDATE#

I achieve this with two a combination of two great developer tools: It does not matter if I am doing front-end or back-end development – I insist on having the code in one window and the result update in another window as soon as I press Ctrl+S or switch focus between windows. The Atom code editor with autosave to automatically save code files. $ find * | entr rsync -avz -delete-after * :/path-to-target-dir/ | ts The basic usage of Entr is to list all files in your coding project with find and pipe the list to entr telling it what command to run when any of the files is updated: The Entr command-line tool to restart programs automatically when files change. The same principle applies to all development workflows, not just command-line stuff. For example this very blog is written in Markdown that is converted to static HTML pages with Hugo, which has a built-in command hugo server that server the pages locally and automatically reloads pages thanks to livereload.js.