Skip to content

Commit

Permalink
docs: expose .env and update config docs (tajo#60)
Browse files Browse the repository at this point in the history
* docs: update config docs

* chore: bump the ladle to 2.9.0 beta3
  • Loading branch information
tajo authored Mar 16, 2022
1 parent 8452e99 commit b49f00d
Show file tree
Hide file tree
Showing 9 changed files with 186 additions and 130 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Ladle is an environment to develop, test and share your React components faster.

- [Documentation](https://www.ladle.dev)
- [Demo](https://baseweb.netlify.app)
- [StackBlitz](https://stackblitz.com/edit/ladle)
- [StackBlitz](https://node.new/ladle)
- [Discord](https://discord.gg/H6FSHjyW7e)

![Ladle BaseWeb](https://www.ladle.dev/img/ladle-baseweb.png)
Expand Down
2 changes: 2 additions & 0 deletions packages/ladle/lib/cli/vite-base.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ const getBaseViteConfig = async (ladleConfig, configFolder, viteConfig) => {
css: {
postcss: process.cwd(),
},
envDir: process.cwd(),
envPrefix: ladleConfig.envPrefix,
resolve: {
alias: ladleConfig.resolve.alias,
},
Expand Down
1 change: 1 addition & 0 deletions packages/ladle/lib/shared/default-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export default {
babelPresets: [],
babelPlugins: [],
define: {}, // https://vitejs.dev/config/#define
envPrefix: "VITE_",
resolve: {
alias: {}, // https://vitejs.dev/config/#resolve-alias
},
Expand Down
1 change: 1 addition & 0 deletions packages/ladle/lib/shared/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ export type Config = {
babelPlugins: any[];
babelPresets: any[];
define: { [key: string]: string };
envPrefix: string | string[];
resolve: {
alias: { [key: string]: string };
};
Expand Down
2 changes: 1 addition & 1 deletion packages/ladle/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@
"open": "^8.4.0",
"query-string": "^7.1.1",
"rollup-pluginutils": "^2.8.2",
"vite": "^2.9.0-beta.0"
"vite": "^2.9.0-beta.3"
},
"peerDependencies": {
"react": ">=16.14.0",
Expand Down
52 changes: 49 additions & 3 deletions packages/website/docs/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,65 @@ id: config
title: Config
---

Ladle does not require any configuration and many features can be controlled through the CLI parameters. However, more advanced setups might require some configuration. In that case, you can add `.ladle/config.mjs` file:
Ladle does not require any configuration and many features can be controlled through the CLI parameters. However, more advanced setups might require some configuration. In that case, you can add `.ladle/config.mjs` file.

## Story filenames

```tsx
export default {
stories: "src/**/control.stories.{js,jsx,ts,tsx}",
};
```

This would change the default glob that is used for story discovery. All settings you can change and their details:
This would change the default glob that is used for story discovery

## Import Aliases

Some projects use shortcuts like `@` for the `root` when importing modules. You can define your own import aliases as:

```js
export default {
resolve: {
alias: {
"@": "../src",
},
},
};
```

## Env Variables and Modes

Ladle uses Vite's env variables and exposes it's modes. [Read more](https://vitejs.dev/guide/env-and-mode.html).

Ladle uses [dotenv](https://github.com/motdotla/dotenv) so you can pass variables through `.env` files:

```
.env # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git
```

Loaded env variables are exposed to your client source code via `import.meta.env`. However, to prevent accidentally leaking env variables to the client, only variables prefixed with `VITE_` are exposed to your Ladle/Vite-processed code. This prefix can be customized through the `envPrefix` config parameter.

## Global Constant Replacements

[https://vitejs.dev/config/#define](https://vitejs.dev/config/#define)

Ladle config exposes `define` on the top level (all modes), and in `serve` (dev) and `build` (prod) modes.

## All Options

All settings you can change and their details:

```tsx
export default {
stories: "src/**/*.stories.{js,jsx,ts,tsx}",
root: process.cwd(),
root: "./",
defaultStory: "", // default story id to load, alphabetical by default
babelPresets: [],
babelPlugins: [],
envPrefix: "VITE_", // can be a string or string[]
define: {}, // https://vitejs.dev/config/#define
resolve: {
alias: {}, // https://vitejs.dev/config/#resolve-alias
Expand Down Expand Up @@ -62,3 +104,7 @@ export default {
},
};
```

## Common Problems

- Configuration is shared between the Ladle CLI and frontend client so you can't use Node APIs/imports like `path`.
2 changes: 1 addition & 1 deletion packages/website/docs/setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,4 @@ yarn ladle serve

## StackBlitz

You can also try ladle in your browser through our StackBlitz [template](https://stackblitz.com/edit/ladle).
You can also try ladle in your browser through our StackBlitz [template](https://node.new/ladle).
2 changes: 1 addition & 1 deletion packages/website/src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ function Home() {
"button button--outline button--secondary button--lg",
styles.getStarted,
)}
to="https://stackblitz.com/edit/ladle"
to="https://node.new/ladle"
>
StackBlitz
</Link>
Expand Down
Loading

0 comments on commit b49f00d

Please sign in to comment.