Can we add a new template for typescript-react ? about sandpack HOT 10 CLOSED

if you want to use React Typescript in the current version (0.0.1) you can pass a full custom setup, without specifying the template prop. There's an example in storybook: https://github.com/codesandbox/sandpack/blob/main/sandpack-react/src/presets/Sandpack.stories.tsx#L83

You can also add a template, there's another issue with adding more templates, I will add react-typescript there on the list. But that's just a temporary implementation as we want to fetch the setup files from the codesandbox templates on the long term, so we don't keep these hardcoded versions of the files and dependencies.

from sandpack.

This did work for me, but I also got a bit confused. If I am not using any templates, what are the defaults for config files.

For example, say I wanted to add a custom webpack config file, what would be the best way to do that ?

from sandpack.

if no template prop is passed, only the files in customSetup are used, so whatever you pass there it will be used by the bundler. whatever works in codesandbox, should work here. not sure about webpack though, since the bundler is not using it. what is the webpack config solving in your case?

from sandpack.

I wanted to integrate react-native-vector-icons in a react-native-web project. The package has support for icons on web, but requires to do some config https://github.com/oblador/react-native-vector-icons#examples

In your webpack configuration file, add a section to handle ttf files using url-loader (or file-loader)

{
  test: /\.ttf$/,
  loader: "url-loader", // or directly file-loader
  include: path.resolve(__dirname, "node_modules/react-native-vector-icons"),
},

from sandpack.

Hey @alexnm, do you have any recommendation on what would be the best way to do this ?

from sandpack.

So it's a bit tricky with this, because the bundler can run loaders, but does not read a webpack config, if you look at the bundler code in codesandbox-client/packages/app/src/sandbox you can what's happening. I'm not that familiar with that side of the codebase, but from what I talked with Ives, the bundler was not build to run custom loaders because then you project would not work when you download it locally. I'll keep this open to see if we can come up with a partial solution for sandpack only.

from sandpack.

https://codesandbox.io/s/30x4zovko1

This example is using custom webpack config files and these are working fine, as an alternative setup to create-react-app

from sandpack.

🤷‍♂️
🤷‍♂️ 🤷‍♂️
🤷‍♂️ 🤷‍♂️ 🤷‍♂️
🤷‍♂️ 🤷‍♂️ 🤷‍♂️ 🤷‍♂️

I am so confused 🤣

from sandpack.

have you tried passing webpack configs in a similar manner with the codesandbox link? so webpack is not actually running in the bundler, but there's a CLI used to run the webpack loaders during the bundling/transpile process. In theory, if you pass all the files that this codesandbox has to a sandpack instance, it should run in the same way

from sandpack.

I'll close this and move the topic of templates to a discussion here on github

from sandpack.