Website development
Set Up a Website Development Environment
Set up an editor, runtime, Git repository and optional AI assistant. Verify the build, protect credentials and choose suitable commercial hosting.
Prepare a workspace you can reproduce
A development environment should let you run the site, inspect changes and recover from a mistake. Choose the tools around the project you are maintaining. A small static site, a CMS theme and a full-stack application have different requirements.
This guide covers local setup. Use the Claude Code workflow guide for working with an assistant after installation, and the Next.js website guide for the build itself.
Start with a project folder, a version-control repository and a record of the commands needed to run the site. Keep account credentials separate from the code. For an existing business website, take a backup and preserve the URL inventory before making changes.
Choose an editor, runtime and assistant separately
| Layer | Decision | Check before choosing |
|---|---|---|
| Editor | Terminal-oriented or visual editing | Diff review, accessibility, extensions and team familiarity |
| Runtime | The environment the project needs | Required version in project documentation and dependencies |
| Assistant | Optional coding and review support | Account access, usage limits, data handling and permissions |
| Hosting | Where the finished site runs | Commercial-use terms, build support, storage and usage costs |
An editor subscription, a Claude subscription and API billing are separate purchases. Do not assume one includes the others. Check current account terms before choosing a workflow around a paid feature.
Install and verify Claude Code
Use the installation method for your operating system in the official Claude Code setup guide. After installation, open the project directory and verify the executable is available:
claude --version
claudeComplete authentication using the account route your team has approved. If the command is not found, check the installer output and shell path before reinstalling. Avoid mixing several installation methods while troubleshooting.
For a JavaScript project, check the runtime separately with node --version. Use the version required by the project and its current framework. Record it in the repository so another developer can reproduce the environment.
Ask the assistant to inspect the project and identify the existing run, build and check commands before changing files. Review the proposed edits and the diff. A successful command is evidence that the command ran, not proof the website meets the brief.
Use a visual editor when it helps review
Open the project folder in Cursor or another editor your team uses. Check the source-control panel, terminal and file explorer before adding extensions. Use a small reversible change to confirm you can inspect a diff and undo it.
Claude Code has an official editor extension available for compatible editors. Follow its current installation documentation and verify the publisher. Cursor’s own assistant and a separately authenticated Claude Code extension have different account and billing arrangements.
For a new Next.js project, follow the framework’s current setup prompts rather than a dated list of version-specific defaults:
npx create-next-app@latest my-business-website
cd my-business-website
npm run devReview the generated files and record the installed versions. When continuing an existing project, install from its lockfile and run its documented commands instead of scaffolding over it.
Keep local tooling and production hosting separate
You can write and preview a website using an editor, Git and the project’s local runtime without a paid coding assistant. AI assistance is optional. Make sure someone can still review the code, understand errors and maintain the result.
Create the repository’s ignore rules before the first commit. Exclude secrets, local environment files, dependency folders and build output as appropriate to the stack. Inspect the staged diff before pushing. Keep a safe example file listing required environment-variable names without real values.
Local development being free does not make production hosting free for every use. Vercel Hobby is for personal, non-commercial use. A business site needs a plan whose terms fit its use and resource requirements.
Budget separately for the domain, hosting, storage, transactional email and any APIs. A trial is useful for evaluation, but its limits should not become the production plan by accident.
Common setup questions
You need enough understanding to review changes, run checks and recognize when to get help. A tool can create files without establishing that the output is correct or maintainable. Start with a small task and a recoverable copy.
Use the version required by the project or the current framework documentation. Record the version and lock dependencies. Avoid changing runtime and application dependencies together unless the upgrade requires it.
Yes. Back it up, inspect its instructions and use its existing build process. Do not run a scaffolding command that overwrites a working site. Preserve important URLs and assets during a migration.
You can run the site, make and review a small edit, run its checks, build it and restore the previous state. A second developer should be able to follow the repository instructions without guessing missing steps.
Record the commands and build one small feature
Write a short README with the required runtime, installation command, development command, build command and necessary configuration names. Keep the instructions aligned with the repository’s actual scripts.
Then build one bounded part of the site and test it at mobile and desktop sizes. Use the website development guide for page structure, or explore Luminous software delivery when the project needs implementation support.