How to set up project locally on Shipixen

beginner 8 min read Updated 2026-03-18
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.

Get ShipixenPartner

Prerequisites

  • Node.js 18+ installed
  • Git installed
  • Shipixen account
  • Code editor (VS Code recommended)

Step-by-Step Instructions

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.
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]
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.
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.
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.
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.
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.
Use the Tailwind CSS IntelliSense extension for better class name autocompletion.

Common Issues & 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.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Shipixen website before purchasing.
Limited Time

Affiliate link. We may earn a commission at no extra cost to you.