It's a simple variation of Sitecore JSS template for React that supports TypeScript language and Helix architecture.

• TypeScript configuration for source and manifest files
• Sitecore JSS Helix scaffolder for React-TypeScript components and modules
• Helix folder structure
• Absolute paths for importing modules from Foundation, Feature and Project layers.
• ESLint configuration extended by @typescript-eslint plugin
• Sitecore JSS v12
• TypeScript v3.6.3
• ReactJS v16.8.6

• Scaffolding
  • Helix module
  • Component
• Absolute paths
• References
• Authors

To create a module you have to execute command:

jss scaffold

After that you will be asked to choose option in following dialog (press key "2" for choosing "module"):

Welcome in Sitecore JSS Helix scaffolder for React-TypeScript components

[1] component
[2] module

Choose template [1/2]:

Next you have to choose an appropriate layer:

[1] Foundation
[2] Feature
[3] Project

Choose layer [1, 2, 3]:

And at the end that you have to put the module name and then press enter.

Example of scaffolded module folder structure:

src/
    Feature/
        TestM/
            components/
            models/
            services/

First execute command:

jss scaffold

After executing commad you will have to choose option in following dialog (press key "1" for choosing "component"):

Welcome in Sitecore JSS Helix scaffolder for React-TypeScript components

[1] component
[2] module

Choose template [1/2]:

Next you have to choose an appriopriate layer:

[1] Foundation
[2] Feature
[3] Project

Choose layer [1, 2, 3]:

After that you have to select module in which your component will be created:

[1] ContentBlock
[2] Errors
[3] GraphQL
[4] Styleguide
[5] TestM

Choose module [1...5]:

And in the end you have to put your's component name and press enter

Example of scaffolded component in folder structure:

sitecore/
    definitions/
        components/
            TestC.sitecore.ts
src/
    Feature/
        TestM/
            components/
                TestC/
                    index.tsx
            models/
                TestCProps.ts

Example of scaffolded component:

import * as React from 'react';
import { Text } from '@sitecore-jss/sitecore-jss-react';
import TestCProps from 'Feature/TestM/models/TestCProps';

const TestC = (props: TestCProps) => (
  <div>
    <p>TestC Component</p>
    <Text field={props.fields.heading} />
  </div>
);

export default TestC;

In entire project you can use absolute path for imports. You don't need to use imports like:

import TestComponent from '../../../Feature/TestModule/components/TestComponent';

It can look simpler:

import TestComponent from 'Feature/TestModule/components/TestComponent';

• JSS Documentation
• Helix and Sitecore JavaScript Services (JSS)
• Developing React components in Typescript with Sitecore JSS 9.1

• Lukasz Wardzala - github