TemperStack
Find Tools
Beginner8 min readUpdated Mar 18, 2026

How to set up project locally on Shipixen

Quick Answer

Setting up a Shipixen project locally involves downloading your generated project from the Shipixen dashboard and running npm install followed by npm run dev. The process typically takes 5-10 minutes and requires Node.js 18 or higher.

Prerequisites

  1. Node.js 18+ installed
  2. Git installed
  3. Shipixen account
  4. Code editor (VS Code recommended)
1

Access your Shipixen dashboard

Log into your Shipixen account and navigate to the Projects section. Locate the project you want to set up locally and click on the Download button or Clone Repository option.
Tip
If you haven't created a project yet, use the Shipixen generator to create one first.
2

Download and extract the project

If downloading as ZIP: extract the downloaded file to your desired directory. If cloning via Git: 
git clone [your-project-url]
cd [project-name]
Tip
Choose a directory path without spaces to avoid potential issues with some npm packages.
3

Install dependencies

Navigate to your project directory in terminal and install the required dependencies:
npm install

This will install Next.js, Tailwind CSS, and other Shipixen-specific packages.
Tip
Use npm ci instead of npm install for faster, more reliable installations in production environments.
4

Configure environment variables

Copy the example environment file and configure your local settings:
cp .env.example .env.local

Edit .env.local and add your API keys and configuration values as needed.
Tip
Never commit your .env.local file to version control - it's already in .gitignore.
5

Start the development server

Launch the local development server:
npm run dev

The application will start on http://localhost:3000 by default. You should see your Shipixen project running locally.
Tip
Use npm run dev -- -p 3001 to run on a different port if 3000 is already in use.
6

Verify the setup

Open your browser and navigate to http://localhost:3000. You should see your Shipixen landing page with all components and styling working correctly. Check the terminal for any error messages.
Tip
Enable browser developer tools to monitor for any console errors or warnings.
7

Set up your development workflow

Install recommended VS Code extensions for Next.js and Tailwind CSS. Configure your code editor with the included .vscode/settings.json and prettier.config.js files for consistent formatting.
Tip
Use the Tailwind CSS IntelliSense extension for better class name autocompletion.

Troubleshooting

npm install fails with permission errors
Run sudo npm install on macOS/Linux or run your terminal as Administrator on Windows. Alternatively, configure npm to use a different directory for global packages.
Development server won't start or shows port already in use
Kill any processes using port 3000 with lsof -ti:3000 | xargs kill -9 on macOS/Linux or use netstat -ano | findstr :3000 on Windows to find and terminate the process.
Styles not loading correctly or Tailwind classes not working
Ensure Tailwind CSS is properly configured by checking tailwind.config.js and running npm run build to verify the build process works correctly.
Environment variables not loading
Verify your .env.local file is in the project root directory and variable names start with NEXT_PUBLIC_ for client-side access. Restart the development server after making changes.

Related Guides

More Shipixen Tutorials

How to generate your first boilerplate

How to deploy to Vercel

How to add your first MDX blog post

How to customize the landing page

Other Tool Tutorials

F

Framer Tutorials

G

Ghost Tutorials

S

Squarespace Tutorials

Ready to get started with Shipixen?

Put this tutorial into practice. Visit Shipixen and follow the steps above.

Visit Shipixen →