Local Development Guide

EnjuFolio can be deployed without ever touching a local environment. However, if you want a good experience for:

• editing configuration (enju.config.ts)
• writing and previewing content (MDX)
• doing more advanced customization

…then running the site locally with a proper editor will make a huge difference.

1. Environment & tools

You’ll need:

Node.js >= 20
git
pnpm

If you’re already set up

If you already have Node 20+, git, and pnpm installed, you can skip to Install dependencies.

1.1 Check Node.js

node --version

If you see something like v20.x.x or higher, you’re good.

If not, install the latest LTS version:

• macOS / Linux: recommended to use nvm
• Windows: use WSL or the official installer

👉 Download Node.js

1.2 Check Git

git --version

If you see output like git version 2.40.0, Git is installed.

If not:

👉 Download Git

1.3 Clone the repository

Pick a folder and run:

git clone https://github.com/ZL-Asica/EnjuFolio.git
cd EnjuFolio

1.4 Enable pnpm (via Corepack)

EnjuFolio uses pnpm as the package manager.

pnpm --version

If that command fails, enable pnpm via Corepack (recommended for Node 20+):

npm install --global corepack@latest
corepack enable pnpm

For more details:

👉 pnpm Installation Guide

2. Recommended editor setup (VS Code)

You can technically edit files in any editor—or even in the GitHub UI—but for day-to-day work, we strongly recommend:

• VS Code as the editor
• The workspace recommendations included in this repo

When you open the project in VS Code, it will suggest installing a few extensions (from .vscode/extensions.json), such as:

• ESLint → inline linting and auto-fix suggestions
• Tailwind CSS IntelliSense → class name completion and previews
• MDX / Markdown tooling → better editing and preview for your content

This combination makes a big difference when you:

• tweak src/enju.config.ts and rely on hover docs + type checking
• write MDX articles with live feedback
• keep your codebase consistent with the rest of the template

For download and installation instructions:

👉 VS Code Official Website

TIP

If VS Code prompts you to install “Recommended extensions for this workspace”, it’s worth saying yes. Those recommendations are chosen to match EnjuFolio.

3. Install dependencies

Inside the project directory:

pnpm install

This will download all required dependencies.

4. Start the local dev server

Run:

pnpm dev

Then open:

http://localhost:3000

You should now see the default EnjuFolio site.

Where to edit first?

• Identity & layout: src/enju.config.ts – with rich TypeScript docs when you hover fields in VS Code
• Content (research / projects / news): src/contents/*

Save a file and the page will update automatically. For configuration fields, hovering with your mouse in the IDE will show detailed docs and examples for each option.

5. Build & preview a production build

To simulate the production build locally:

pnpm build
pnpm start

Then visit:

http://localhost:3000

This uses the same optimized output that you’d deploy.

6. Helpful scripts

Some extra commands you may find useful:

• Lint the code

  pnpm lint

• Auto-fix lint issues (where possible)

  pnpm lint:fix

Running these occasionally (especially before opening a PR or doing bigger customizations) keeps your local changes aligned with the template’s conventions.

With this setup, editing configuration and writing content should feel much closer to “working in a real app” than “fighting a theme”. Open the repo in VS Code, let the recommended extensions install, and you’ll get a smooth loop of:

change → save → see it live → adjust.