React Typescript Boilerplate v.0.7

Developers
1

Hi, I was looking for a react with typescript boilerplate and this one seems to be a bit out of date: GitHub - FloorLamp/dfinity-react-ts-tailwind-starter: Create DFINITY React App

So thanks to @cryptoschindler using this example dfinity-streams/index.js at 34be2c0fee7d1125f8b54fc55223af2eede29075 · SuddenlyHazel/dfinity-streams · GitHub

I’ve managed to get it to work. You can see it here: GitHub - gabrielnic/dfinity-react

It’s pretty barebone but I will add more things on the way.

5 Likes
2

Hello, @Gabriel I have one question about the agent and identities-PrinicpalIDs. Does the agent create new Principals per browser like we already know? I am new to agent so I am currently trying to understand how it works and what could I create with that.

Thank you!

3

That particular setup will store an identity in the browser’s local storage, it’ll keep using this one if found. If you were to delete your browser’s local data it would generate you a new one. See this part: dfinity-react/agent.js at main · gabrielnic/dfinity-react · GitHub

2 Likes
4

I’ve update the project to use dfinity agent 0.7.1 and dfx version 0.7.0-beta.2

I’ve created 3 issues so any help is appreciated.

@kpeacock I know you (and your team) are taking care of the dfinity agent so any suggestions/help is welcomed.

Thanks

3 Likes
5

Thanks for creating the issues! We do generate a d.ts file alongside the other content in dfx-generated, but I recognize the ergonomics aren’t great. I’ve got a proposal on the backlog to provide a command to generate those files so they can be committed into your source code.

you need to import _SERVICE and pass it to Actor.createActor<_SERVICE>(...

Long term goal is for this to all be automatic, but I do want to get you unblocked.

I think the BigInt issue will go away when we release the next version of DFX that removes the BigNumber references, and idk what’s up with the SVG

1 Like
6

Please give an example how to properly import _SERVICE interface from autogenerated .dfx/local/canisters/canister_name/canister_name.d.ts file

7

+1. Any news here? Having some trouble importing _SERVICE and an example would likely be helpful for everyone.

On a different note, the .d.ts generated by dfx actually appears to be invalid in my case. It’s generating an invalid interface:

export interface CardDraw [
  [] | [CardId],
  [] | [CardReversed],
];

…which raises "The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2363)". It should probably be a type instead:

export type CardDraw = [
  [] | [CardId],
  [] | [CardReversed],
];
8

Working on updating the version of candid used by dfx now, where we’ve fixed that.

While we haven’t added in the generate types command yet, a good workaround we’ve used in a few projects is to download didc and use it to output the types into the source directory. Releases · dfinity/candid · GitHub

Here’s us doing it in Internet Identity:

3 Likes
9

Yeah, I was actually going to update that example + authentication as many requested it.

Usually I just copy the .did from from inside .dfx and put in my front-end agent.ts.

I will update my code example today or tmw.

1 Like
10

Very good, thanks gang. Very much looking forward to a smooth implementation of using types generated by dfx.

11

Improved TypeScript + Candid experience now one of the top three priorities in my queue. It’s going to take some time to design it and get it right though

1 Like
12

@alexeychirkov can be done like this, but this is not the target design

// tsconfig
{
  "compilerOptions": {
    ....
    "paths": {
      "ic:backend": [
        ".dfx/local/canisters/backend/backend.js"
      ],
      "ic:backend/types": [
        ".dfx/local/canisters/backend/backend.d.ts"
      ]
    }
  }
...
}

// vite.config
import path from 'path';
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import dfxJson from './dfx.json';

// List of all aliases for canisters
const aliases = Object.entries(dfxJson.canisters).reduce(
  (acc, [name, _value]) => {
    // Get the network name, or `local` by default.
    const networkName = process.env['DFX_NETWORK'] || 'local'
    const outputRoot = path.join(
      __dirname,
      '.dfx',
      networkName,
      'canisters',
      name,
    )

    return {
      ...acc,
      // ['dfx-generated/' + name]: path.join(outputRoot, name + '.js'),
      ['ic:' + name]: path.join(outputRoot, name + '.js'),
      ['ic:' + name + '/types']: path.join(outputRoot, name + '.d.ts'),
    }
  },
  {},
);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      ...aliases,
    },
  },
})


// using
import { idlFactory as backend_idl, canisterId as backend_id } from 'ic:backend';
import IBackend from 'ic:backend/types';

const agent = new HttpAgent(opts);
const backend: IBackend = Actor.createActor(backend_idl, { agent, canisterId: backend_id });
1 Like
13

Quick update: React Typescript Boilerplate + II Authentication

14

As a follow-up to this thread, Coming soon - improved JavaScript and TypeScript Intellisense - #5 by kpeacock

15

yeah can’t wait for that :slight_smile:

16

I’ve merged my changes into DFX! It’s just a matter of pulling off a release, and you can expect it in the next version we ship

2 Likes
17

I’m also adding webpack dev server with fully configured hot reloading to the dfx new starter app

2 Likes