CODEWITHSUNDEEP
reactjstypescriptliferayreact-typescriptliferay-7
dgiaig
dgiaig

Reputation: 221

Liferay 7.4 React portlet with typescript support

I am trying to create a Liferay (v 7.4 ga61) portlet with React and TypeScript support.

Looking at the various tutorials, the options are:

The yo generator seems okay, but unfortunately, the generated portlet is not "wrapped" inside a typical Liferay portlet (with Java and JSP support).

On the other hand, using blade-cli (liferay-ide plugin), I get what I expect, but without TypeScript support.

I managed to integrate TypeScript by adding the dependencies, the tsconfig.json file, and including "tsc" before the default build script generated by Blade.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "es2015"],
    "jsx": "react",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/main/resources/META-INF/resources/lib/**/*"]
}

package.json

{
    "dependencies": {
        "react": "16.8.6",
        "react-dom": "16.8.6"
    },
    "devDependencies": {
        "@babel/cli": "^7.0.0",
        "@babel/core": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "liferay-npm-bundler": "2.30.0",
        "typescript": "^5.0.0",
        "@types/react": "^16.0.0",
        "@types/react-dom": "^16.0.0",
        "ts-loader": "^9.0.0"
    },
    "main": "lib/index.es.js",
    "name": "untitled",
    "scripts": {
        "build": "tsc && babel --source-maps -d build/resources/main/META-INF/resources src/main/resources/META-INF/resources && liferay-npm-bundler"
    },
    "version": "1.0.0"
}

By doing this, my .tsx files are compiled into .js files and I manage to achieve integration.

Is this the correct way to proceed or is there a better way? Thank you.

Thanks

Upvotes: 1

Views: 278

Answers (0)

Related Questions