SDK openProject TypeScript + React

[sandgraham]

Hi there, I'm not sure if this is a feature request or I am missing something in docs.

I was hoping to generate a React/TS project on the fly using the JS SDK. I can use sdk.openProject with one of the existing template strings, but there is no template string that supports React/TS so far as I can tell.

It seems like this project already has TS/React working. Is there a way to leverage the same environment when creating a new project via the SDK?

[fraincs]

Is this even possible nowadays?

[sandgraham]

Haven't looked at this in a while, but it seems the create-react-app template allows for TS (I don't think this was an option when I opened this issue). You need to add a few extra options to get it to work but I was able to recreate the React + TS starter template using openProject like so:

sdk.openProject({
  template: "create-react-app",
  title: "React + TS",
  description: "Basic React + TS Template",
  dependencies: {
    "@types/react": "latest",
    "@types/react-dom": "latest",
  },
  files: {
    "public/index.html": `<div id="root"></div>`,
    "src/style.css": `h1, p {
  font-family: Lato;
}`,
    "src/App.tsx": `import * as React from 'react';
import './style.css';

export default function App() {
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}
`,
    "src/index.tsx": `import * as React from 'react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);        
`,
  },
});

That said, it is probably easier to reference an existing GitHub project using openGithubProject.

I didn't try it, but it might be possible to use a GH project with the node project template and leverage Vite instead of CRA.

In terms of this issue, it does seem reasonable to have a React/TS project option that works out of the box. In particular it would be great if you could reference the starter projects that exist in the web app.

[fraincs]

it would be great if you could reference the starter projects that exist in the web app.

I agree totally.

As for your sample it seems that the create-react-app template wants an index.ts and not a .tsx

[sandgraham]

Hm, it seems to work fine as is in the snippet. Here is some unedited example output:

https://stackblitz.com/edit/react-z9msve?file=src%2Findex.tsx

Using sdk version 1.9.0.