React SPA Typescript

[Rahul17]

Is it possible to create a React typescript SPA project by default from mvn build command or what are the complete steps to convert the javascript app to typescript completely as there are many default packages throwing error as we tried converting it typescript

[Suraj_Kamdi]

@Rahul17Refer this official document from adobe https://github.com/adobe/aem-project-archetype

[sunil_kumar_]

Hi @Rahul17 , yes, it is quite possible. you can create a React SPA project from scratch using Maven archetype. Please use 'react' for 'frontendModule' property while creating project.
You can follow above github link or this document for more information about maven archetype.
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/archetyp...

[ManviSharma · Accepted solution]

Hi,

Yes, it is possible to create a React TypeScript SPA project using Maven build commands. Here are the steps to convert a JavaScript app to TypeScript:

1. Install TypeScript and the necessary dependencies:

npm install --save-dev typescript @types/react @types/react-dom @types/node

- This command installs TypeScript and the necessary type definitions for React, ReactDOM, and Node.js. 

    2. Rename the JavaScript files with a .tsx extension. This tells TypeScript that these files contain React components.

    3. Update the imports in your files to reference the correct TypeScript types.

    4. Add a tsconfig.json file to your project's root directory. This file tells TypeScript how to compile your code. 

   5. Modify your code to remove any JavaScript-specific syntax that isn't valid TypeScript. 
   6. Run npm run build to compile your TypeScript code.

   7. Update your build commands in your pom.xml file to include the necessary TypeScript build commands. You can use the frontend-maven-plugin to do this.

- By following these steps, you should be able to convert your JavaScript app to TypeScript and build it using Maven.