Skip to main content
Get your local development environment ready to contribute to stevenson.space.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js (v16 or higher)
  • npm (comes with Node.js)
  • Git for version control
  • A code editor (VS Code recommended)
If you know JavaScript, HTML, and CSS well, you’ll be close to being able to work with Vue. React, Next, Gatsby, and other JS frameworks are quite similar to Vue.js.

​
Clone the Repository

1

Fork and clone

Fork the repository on GitHub, then clone your fork:
git clone https://github.com/YOUR_USERNAME/shs.git
cd shs
2

Install dependencies

Install all project dependencies using npm:
npm install
This will install all dependencies listed in package.json, including Vue 3, TypeScript, Pinia, Vite, and development tools.
3

Configure environment variables

Duplicate the .env-template file and rename it to .env:
cp .env-template .env
The .env file is gitignored and won’t be committed to GitHub. Current template includes:
VITE_EDIT_COLORS=false
Set VITE_EDIT_COLORS=true if you want to enable color editing features during development.
4

Start the development server

Run the development server with hot-reload:
npm run dev
The application will be available at http://localhost:8080

​
Available Scripts

The project includes several npm scripts for different tasks: 
# Start development server with hot-reload
npm run dev

# Alternative: serve mode
npm run serve

​
Development Server Details

The Vite development server is configured in vite.config.js:19-22 with:
  • Port: 8080 (maintains consistency with legacy ports)
  • Allowed hosts: localhost, *.pages.dev, stevenson.space
  • Hot Module Replacement (HMR): Enabled by default

​
Troubleshooting

If you encounter dependency issues, try deleting node_modules and package-lock.json, then run npm install again.

​
Common Issues

Port already in use: If port 8080 is already occupied, you can modify the port in vite.config.js or kill the process using that port. Module not found errors: Ensure all dependencies are installed with npm install. TypeScript errors: The project uses TypeScript with strict type checking. Check tsconfig.json for configuration details.

​
Next Steps

Once your environment is set up:
  1. Explore the project architecture to understand the codebase structure
  2. Review the contribution guidelines before making changes
  3. Check out the open issues on GitHub to find something to work on

Build docs developers (and LLMs) love

Get started for freeTalk to us