Livereload Firefox



Details
Written by Nam Ha Minh
Last Updated on 26 February 2020 | Print Email
In addition to automatic restart on changes feature, the Spring Boot DevTools module also comes with an embedded LiveReload server that can be used to trigger a browser refresh whenever a resource is changed. For example, when you make some changes to a template file, the browser automatically refreshes the page uses that template – you see your changes take effect in action – no need to press F5 again and again – saving you a lot of time.In this post, you will learn to use LiveReload with Spring Boot DevTools to significantly reduce waiting time in developing Spring Boot projects – increase your productivity.Using LiveReload for auto-reload changes is pretty easy. Here are the steps:
  1. Add the dependency spring-boot-devtools to your project’s build file (pom.xml).
  2. Install LiveReload extension for your browser.
  3. Restart your Spring Boot application.
That’s it, and you’re all set. Enjoy better Spring Boot development experience.

1. Install Spring Boot DevTools

Is there a way to have it open up firefox instead of chrome? (note: my system default browser is chrome) I could not find any documentation on this in gulp webserver or gulp livereload either. Maybe it would be a good idea to have Firefox fetch fonts from a cdn on the internet if fonts on the website aren't installed on the clients system so that users can enjoy the web better? Hi again, My problem was that since I'm on Linux and didn't install Microsoft fonts after I upgraded to Fedora 17 last year Firefox hasn't worked properly. I really love this extension. But I am very UPSET that they did not create an add on for firefox quantum. So, I can not use firefox for the lack of livereload as I work on dual monitor. Without livereload, it is very boring to hitting refresh. PLEASE MAKE ONE FOR FIREFOX QUANTUM. LiveReload 0.6.4 (livereload@livereload.com).mozilla/ ├── appreg ├── eclipse ├── extensions ├── firefox │ ├── 5q0epjhm.default │ ├── Crash Reports │.

So, make sure that you have the following dependency in the Maven’s build file:If you are using Spring Tool Suite IDE, right-click on the project, then click

Livereload Firefox

Spring > Add DevTools. Start your Spring Boot application, and you will see LiveReload server is running by default:

2. Install LiveReload extension for your browser

Livereload firefox extension

Go to http://livereload.com/extensions/ and click on the link that relates to your browser. Currently, it supports Safari, Chrome and Firefox. For example, I’m using Chrome so I got this:Click Add to Chrome. and click Add extension when asked. Then you will see the LiveReload icon appears to the right of the address bar like this:You can click that icon to enable/disable LiveReload on a specific page in the browser. When the extension connected to LiveReload server, the small circle at the center becomes a filled dot. If not, you will see this error message:

3. What will trigger a browser refresh?

Any changes you made to a resource (Java code, HTML, properties file, etc) in the classpath will trigger a restart plus a browser refresh. In addition, changes to resources in the following directories also trigger a live reload: /META-INF/maven, /META-INF/resources, /resources, /static, /public, and /templates.


4. Disable LiveReload server

To disable LiveReload server when your Spring Boot application is running, specify the following property in the Firefoxapplication.properties file:

spring.devtools.livereload.enabled=false

Then restart the application.Thanks to Spring Boot DevTools that makes Spring Boot development much more convenient. You can also watch this video to see how to use Spring Boot DevTools in action:Reference: Using Spring Boot – Developer Tools

Other Spring Boot Tutorials:


About the Author:

Nam Ha Minh is certified Java programmer (SCJP and SCWCD). He started programming with Java in the time of Java 1.4 and has been falling in love with Java since then. Make friend with him on Facebook and watch his Java videos you YouTube.

Use Oracle JET CLI to launch your hybrid mobile application in a browser, simulator, or mobile device for testing and debugging. When you serve your application to a browser or emulator, a live reload option is enabled, and changes you make to the code are immediately reflected in the running application.

Before you begin:

  • Familiarize yourself with the ojet serve command option theme when you want to run the application with an optional platform and a custom theme, as described in Customize Alta Themes Using the Tooling.
  • Optionally, use the ojet serve command with the --release option to serve a release-ready version of your application, as described in Package and Publish Hybrid Mobile Applications.
  • If you want to send your application to an iOS device, you must take additional steps as described in Package a Hybrid Mobile App on iOS.

At a command prompt, change to the application’s top level directory and use the ojet serve command with options to launch the application.

Tip:

You can also enter ojet help at a terminal prompt to get help for specific Oracle JET CLI commands.

The application will launch in a local browser, emulator/simulator, or device depending upon the options you specify. The following table shows examples.

CommandDescription

ojet serve windows -–browser=firefox

Launches a Windows version of the application in the Firefox browser.

ojet serve ios

Launches the application in the iOS Simulator using the Alta iOS theme.

ojet serve android --destination=emulator:MyEmulator

Launches the application in the Android emulator using the AVD named “MyEmulator”. The emulator name is case-sensitive.

ojet serve android --device

Launches the application on the attached Android mobile device.

Livereload Firefox Sublime Text 3

The terminal will also output the names of the files as they are loaded. If your application contains multiple views, the output will reflect the names of the views and associated files as you navigate through the application.

WARNING:

LivereloadIf you specify the Android platform, use a proxy server and skipped the Firefoxojet build step, the serve command will fail the first time you issue it. To resolve this, create a gradle.properties file in your HOME/.gradle

Live Reload Addon Firefox

directory and rerun the serve command. The file should contain the following:

If you left live reload enabled (default, --livereloadtrue), the terminal window updates to reflect that the code has changed. For example, if you save a change to dashboard.html in an application scaffolded with the navbar or navdrawer template, the terminal window outputs the name of the changed file, and the browser or emulator/simulator updates with the change. Live reload is disabled when you serve an application to a device.

Livereload 2 Firefox

To terminate the batch job when using live reload, press Ctrl+C in the command window and then enter y if prompted to terminate the batch job.

About ojet serve Command Options for Hybrid Mobile Applications

Use ojet serve to run your hybrid mobile application in a local web server for testing and debugging.

The following table describes the commonly-used options and provides examples for their use.

OptionDescription

[ios|android|windows]

Desired platform. Enter android, ios, or windows.

build-config

Specify the path to buildConfig.json. The buildConfig.json file contains details that Cordova can use to sign the application.

You do not need this file when building a debug version of your application for Android or Windows, or if you are building your app for deployment to an iOS simulator. However, you must configure one for testing on an iOS device and for pre-release testing of your Android, iOS or Windows application.

server-port

Server port number. If not specified, defaults to 8000.

livereload-port

Live reload port number. If not specified, defaults to 35729.

destination

Specify one of the following:

  • emulator: Displays your application in the default Android AVD, iOS Simulator, or Windows Emulator.

    To use a different emulator, append its name to the emulator option: --destination=emulator:emulator-name.

    Tip:

    You can view the list of available emulators for each platform by invoking the following from your app's top-level folder:

    hybrid/platforms/{platform}/cordova/lib/list-emulator-images

    where {platform} is one of android, ios, or windows.

  • browser: Displays your application in the Chrome browser on your local machine.

    If you don’t have Chrome installed or want to use a different browser, append the name of the desired browser to the browser option:

    Tip:

    To change your application’s default browser from Chrome, open oraclejetconfig.json in the application's top level directory and change the name of the browser in defaultBrowser. For example, to change the default browser to Firefox, edit oraclejetconfig.json as shown below.

  • device: Sends the application to an attached device.

    Optionally, append the name of the device to device option: --destination=device:myDevice.

  • server-only: Serves the application, as if to a browser, but does not launch a browser. Use this option in cloud-based development environments so that you can attach your browser to the app served by the development machine.

browser[=browser-name]

Equivalent to destination=browser[:browser-name].

emulator[=emulator-name]

Equivalent to destination=emulator[:emulator-name].

device[=device-name]

Equivalent to destination=device[:device-name].

server-only

Equivalent to destination=server-only.

livereload

Enable the live reload feature. Live reload is enabled by default (--livereload=true).

Use --livereload=false or --no-livereload to disable the live reload feature.

Disabling live reload can be helpful if you’re working in an IDE and want to use that IDE’s mechanism for loading updated applications.

build

Build the app before you serve it. By default, an app is built before you serve it (--build=true).

Use --build=false or --no-build to suppress the build if you’ve already built the application and just want to serve it.

theme

Theme to use for the application. The theme defaults to redwood for hybrid mobile applications.

Note: If you have migrated to JET 9.0.0 and later, and want to continue building with your Alta theme, for hybrid mobile themes, you can specify: alta:android, alta:ios, alta:windows). Note that the Alta theme is supported through JET 10.0.0 but is expected to become deprecated beyond that. For details about migrating applications, see Oracle JET Application Migration for Release 10.0.0.

You can also enter a different themename for a custom theme as described in About CSS Variables and Custom Themes in Oracle JET for Redwood themes and, for a migrated custom Alta theme, in Customize Alta Themes Using the Tooling.

themes

Themes to use for the application, separated by commas.

If you don’t specify the --theme flag as described above, Oracle JET will use the first element that you specify in --themes as the default theme. Otherwise Oracle JET will build the application with the theme specified in --theme.

--cssvars

Injects a Redwood theme CSS file that supports working with CSS custom properties when you want to override CSS variables to customize the Redwood theme. For details about theming with CSS variables, see About CSS Variables and Custom Themes in Oracle JET.

sass

Manages Sass compilation. If you add Sass and specify the --theme or --themes option, Sass compilation occurs by default and you can use --sass=false or --no-sass to turn it off. If you add Sass and do not specify a theme option, Sass compilation will not occur by default, and you must specify --sass=true or --sass to turn it on. For details about theming with Sass, see Work with Sass.

Note:

The option that you choose controls both Sass compilation in the build step and Sass watch in the serve step.

platform-options

Platform-specific options that will pass verbatim to the Cordova CLI.

This option is typically required for Windows device deployments or if a Cordova plugin contains multiple static libraries for different CPUs. If the value passed contains a quoted string, the quotation marks must be escaped.

For example, you can use platform-options to specify Windows architectures. By default, the architecture defaults to anycpu.

To specify a single architecture, use the --arch option and specify arm, x86, x64, or anycpu.