Keyshade Alpha is launching April 30th 5:00 PM IST
Join our Launch Party
keyshade docs
GithubDiscordReddit
  • 👋What is keyshade?
  • Getting Started
    • Introduction
    • Adding your first secret and variable
    • Installing the CLI
    • Setting up your profile
    • Add keyshade to your project
    • Running your app
  • CLI
    • Introduction
    • Profile
    • Init
    • Workspace
    • Project
    • Environment
    • Run
    • Scan
  • 🥰CONTRIBUTING TO KEYSHADE
    • Summary
    • Design of our code
      • Organization of code
      • API
      • CLI
      • Web
      • Integrations
    • Prerequisites
    • Environment Variables
    • Setting things up
    • Running things locally
      • Running the API
      • Running the Web
      • Running the Platform
      • Running the CLI
      • API Testing
      • Docker Support
  • Internals
    • Architecture of keyshade
    • How the CLI works
Powered by GitBook
On this page
  • Creating a Next.js project
  • Updating the main.ts file
  • Initializing keyshade in your project

Was this helpful?

Edit on GitHub
  1. Getting Started

Add keyshade to your project

Start using keyshade in your project

PreviousSetting up your profileNextRunning your app

Last updated 13 days ago

Was this helpful?

We would be using a Next.js project to demonstrate the process. First, we will be setting up the project, then we would be using our CLI to tie up keyshade to the project.

Creating a Next.js project

Create a NextJS app and name it my-app. Keep everything to default, and make sure that the app is using TypeScript.

Use this command to create a Next.js project:

npx create-next-app my-app

You can find more info about creating a Next.js project .

Updating the main.ts file

In the my-app directory, open the main.ts file and add the following code:

export default function Home() {
  return (
    <div className="bg-white h-screen w-screen text-center text-black flex flex-col">
      <div><span className="font-bold">Secret (NEXT_PUBLIC_API_KEY):</span> {process.env.NEXT_PUBLIC_API_KEY}</div>
      <div><span className="font-bold">Variable (NEXT_PUBLIC_PORT):</span> {process.env.NEXT_PUBLIC_PORT}</div>
    </div>
  );
}

As you can see, we are using 2 environment variables:

  • NEXT_PUBLIC_API_KEY

  • NEXT_PUBLIC_PORT

Initializing keyshade in your project

Run the following command to initialize keyshade in your project:

keyshade init

This is an interactive command, and will ask you to input the workspace-slug, project-slug, environment-slug and private-key to create the keyshade.json file in your project root directory.

You could alternatively run this command to add everything in one line:

keyshade init --workspace-slug my-workspace --project-slug my-project --environment-slug my-environment --private-key my-private-key

You would notice that the keyshade.json file has been created in your project root directory. The content would look something like this:

{
  "workspace": "my-workspace-0",
  "project": "my-app-0",
  "environment": "dev-0",
  "quitOnDecryptionFailure": false
}

Your project's private key has been added into ~/.keyshade/private-keys.json. This approach makes it impossible for you to mistakenly commit your private key to your repository.

We have not added these in any .env file. If you recall, we added these to our project in the section.

here
Adding your first secret and variable