Modello.store

Local Setup

Complete guide for setting up Modello templates in your local development environment.

Overview

This guide covers the complete process of setting up a Modello template for local development. Follow these steps to get your template running on your local machine for development and customization.

Before You Start

Make sure you've completed all the prerequisites before proceeding with this local setup guide.

Get Your Template

After purchasing a template, you'll receive download access via email. Extract the template files to your development directory to begin.

Need Help with Purchase?

For detailed information about purchasing and downloading templates, see our LemonSqueezy Guide.

Local Development Setup

Follow these steps to set up your template for local development:

Extract Template Files

Extract the downloaded ZIP file to your development directory:

# Navigate to your development directory
cd ~/Development  # or your preferred location

# Extract the template (replace with your actual filename)
unzip modello-template-name.zip

# Navigate into the extracted directory
cd modello-template-name

# List the contents to verify extraction
ls -la

Install Dependencies

Install all required Node.js dependencies using npm or yarn:

# Using npm (recommended)
npm install

# OR using yarn
yarn install

# This will install all dependencies listed in package.json

Installation Time

The initial dependency installation may take 2-5 minutes depending on your internet connection and system performance.

Environment Configuration

Set up your environment variables for local development:

# Copy the example environment file
cp .env.example .env.local

# Edit the environment file with your preferred editor
nano .env.local  # or code .env.local for VS Code

Configure the basic environment variables in your .env.local file:

# Basic Next.js configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000
NODE_ENV=development

# Additional service configurations will be added based on your template requirements
# Check the template's README file for specific environment variables needed

Backend Services

If your template requires backend services like databases, authentication, or external APIs, refer to our Backend Setup Guide for detailed configuration instructions.

Run Development Server

With dependencies installed and environment configured, start the development server:

# Start the development server
npm run dev

# OR with yarn
yarn dev

# The server will start on http://localhost:3000

You should see output similar to this:

> next dev

   ▲ Next.js 14.0.0
   - Local:        http://localhost:3000
   - Environments: .env.local

 ✓ Ready in 2.3s

Development Server Running

Your template is now running locally! Open http://localhost:3000 in your browser to view it.

Verify Setup

Confirm that your template is running correctly:

  1. Open your browser and navigate to http://localhost:3000
  2. Verify that the homepage loads without errors
  3. Check the browser console for any JavaScript errors
  4. Test navigation between different pages
  5. Verify that all static assets (images, fonts, etc.) are loading properly

Setup Complete

If everything is working correctly, you're ready to start customizing your template! Proceed to the Customization Guide to learn how to modify your template.

Common Setup Issues

Here are solutions to common problems encountered during local setup:

Port 3000 Already in Use

If you see "Port 3000 is already in use", try:

# Use a different port
npm run dev -- -p 3001

# Or kill the process using port 3000
lsof -ti:3000 | xargs kill -9

Module Not Found Errors

If you see missing module errors:

# Clear npm cache and reinstall
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

Environment Variable Issues

If environment variables aren't loading:

  • Ensure your .env.local file is in the project root directory
  • Restart the development server after making changes
  • Check that variable names are spelled correctly
  • Verify that client-side variables start with NEXT_PUBLIC_

Build or Compilation Errors

If you encounter build errors:

  • Check that you're using the correct Node.js version (see prerequisites)
  • Ensure all required environment variables are set
  • Look for any missing dependencies in package.json
  • Check the terminal output for specific error messages

Need More Help?

If you're still experiencing issues, check our Troubleshooting Guide or contact our support team.