Gatsby

Installation guide for Gatsby.

Create project

Run the create next-app command to create a new Next.js project.

npm create gatsby -ts

Walk through the prompts and choose the options you want.

What would you like to call your site? › my-app
What would you like to name the folder where your site will be created? › my-ap
Will you be using a CMS? › Choose whatever you want
Would you like to install a styling system? › Tailwind CSS
Would you like to install additional features with other plugins? › Choose whatever you want
Shall we do this? › Yes

Update `tsconfig.json`

Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json file:

{
  /* ... */
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./src/*"]
    }
  }
  /* ... */
}

Create `gatsby-node.ts`

import * as path from "path";
 
export const onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        "~/components": path.resolve(__dirname, "src/components"),
        "~/lib/utils": path.resolve(__dirname, "src/lib/utils"),
      },
    },
  });
};

Create project

Run the @kosori/cli init command to configure the project.

npx @kosori/cli init

That's it!

You can now start adding components or hooks to your project.

npx @kosori/cli add components button

The command will install the Button component to your project. And you can import it in your code.

import { Button } from '~/components/ui/button'; 
 
export const Home = () => {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
 
export default Home;

Gatsby

Create project

Update tsconfig.json

Create gatsby-node.ts

Create project

That's it!

On this page

Update `tsconfig.json`

Create `gatsby-node.ts`