Giter Club home page Giter Club logo

liferay-react-demo's Introduction

liferay-react-demo

Setup

Liferay Portal

Need Liferay 7.1+ and the com.liferay.frontend.js.portlet.extender module

Deploying the Portlet

  1. Navigate to portlet
  2. Install: npm install
  3. Set liferayDir in .npmbuildrc
  4. Set contentSpaceId in liferay-config
  5. Deploy: npm run deploy

Starting Standalone

  1. Navigate to standalone
  2. Install: npm install
  3. Create OAuth2 application in Portal. Portal OAuth2 Setup
  4. Set clientId(from OAuth app) and contentSpaceId in liferay-config
  5. Start: npm run start

Caveats

Portlet

  • Have to disable SPA module (Liferay Frontend JS SPA Web)
  • Had to use hash routing because browser history routing breaks after page reload.
    • It'd be great if there was some sort of manifest that the module could provide that would determine which routes portal should ignore.
  • Unable to use custom webpack loaders or custom build process
  • Unable to use dynamic imports and code splitting
  • Requires some internal knowledge of liferay-npm-build-support and liferay-npm-bundler

Standalone

Overall Thoughts

  • /o/api was great for GET requests and reading resources but wasn't fully baked out enough for POSTing and PUTing.
  • /o/api was easy to discover by navigating through the urls
  • /api/jsonws filled in for the gaps that /o/api was missing
  • Adding a file via Liferay.Service didn't work, which means I had to create a separate axios request. See Upload Page
  • There were a lot of required parameters that I didn't find helpful when using /api/jsonws.
  • I couldn't get create-react-app working in the portlet context.I tried adding the proper packages to the package.json so that it deployed as a portlet but the build version of CRA seemed inconsistant with what liferay and the bundler wanted.

liferay-react-demo's People

Contributors

bryceosterhaus avatar

Stargazers

 avatar

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.