Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-86900

As a web developer I can see a preview (generated by DXP) of a fragment as I'm developing it with my desktop tools (Atom, VS Code, ...)

    Details

      Description

      Most of modern frontend development tools offer some kind of live compilation of projects, so developers can see if everything works while writing.

      As part of external projects, we should provide a tool that allows seeing a live preview of fragments, even using external editors.

      It should be possible to invoke the preview from the Fragments toolkit with a command such as "npm run preview". This should open a browser that displays a list of fragments (the ones in the current directory or project). Selecting a fragment should display the preview of the fragment as it is in the file system, even if it has not been imported into the live liferay server. When running the command, the user should be able to select the desired site to preview the fragments with, exactly as it is done in the existing "npm run watch".

      The Fragments Toolkit should check if the Liferay Server supports fragment preview and inform the user if it doesn't.

      Example: https://github.com/webpack/webpack-dev-server

      ------------------------------------------------
      After talking with the team, updating the information:

      Motivation/Context
      With this tool, you can develop a fragment using your own tools (editor, git, etc) and then import this to any liferay-portal and with this feature you can see the result without importing fragments anywhere until they are ready.

      Initial setup
      You need NodeJS 8+ and NPM 6+.
      It's installed as a npm dependency: "npm i -g yo generator-liferay-fragments" and then used as console command "yo liferay-fragments".

      Technical considerations
      The documentation:

      Acceptance Criteria
      1. The user can see the fragment in a preview mode
      Given the developer is using the yeoman generator
      When the developer implements a new fragment
      Then the developer be able to use the command "npm run preview" to see the fragment in a preview mode.

      2. The user can NOT see the fragment
      Given the developer is using the yeoman generator
      When the developer implements a new fragment with some invalid data
      Then an error message will appear when the developer tries to use the command "npm run preview" to see the fragment in a preview mode.

      3. The user can NOT see the fragment when the Liferay Portal connected is not compatible with previews
      Given the developer is using the yeoman generator
      and the Liferay Portal connected is not compatible with previews
      When the developer implements a new fragment
      Then an error message will appear when the developer tries to use the command "npm run preview" to see the fragment in a preview mode.

        Attachments

          Activity

            People

            Assignee:
            kyle.miho Kyle Miho
            Reporter:
            jorge.ferrer Jorge Ferrer
            Recent user:
            Marta Elicegui
            Participants of an Issue:
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:

                Packages

                Version Package
                7.2.X
                Master