Skip to main content

Installation Guide

Welcome to the Vuexy installation guide! ๐ŸŽ‰ Leveraging Create Next App, we've streamlined the setup to kickstart your project automatically and efficiently.

๐Ÿ“š Getting Startedโ€‹

Before you begin, ensure Node.js is installed along with one of the following package managers: pnpm, yarn, or npm.

Recommendations & Requirements

Package Manager: pnpm is our preferred choice for its speed and efficiency.

Node Version: Stick to the LTS version recommended on the official Node.js site. Our template is optimized for this version to avoid compatibility issues.

Hidden Files: Ensure files starting with a dot (.eslintrc, .env.example, etc.) are visible and copied correctly. This is crucial for a successful setup, as missing hidden files can occur if they're not enabled on your system.

Project Setup:โ€‹

  1. Download the Vuexy zip and place it in your chosen directory before unzipping. This step prevents the loss of hidden files during transfer.

  2. Inside, you'll find typescript-version and javascript-version folders, each with full-version & starter-kit. Select the one that suits your project needs and open it in your code editor.

Environment Variables Configuration:โ€‹

  1. Rename .env.example to .env.

  2. Populate the .env file with your specific values.

  3. In the full-version, generate a secure NEXTAUTH_SECRET as suggested here.

  4. For Google authentication in the full-version, include GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in the .env file.

Dependency Installationโ€‹

Run the install command using your chosen package manager from the options below:

pnpm install

Launch Projectโ€‹

Initiate your project with the start command tailored for your package manager:

pnpm dev

๐ŸŽŠ Success! Once the command runs successfully, your console will show the project is active. Visit http://localhost:3000 to view your work in action.

๐ŸŒ Network URL Variation

Your network URL might differ from examples shown; this is normal and depends on your specific network setup.

๐Ÿ”ง Port Customization

Change the port by adding --port <port-number> or -p <port-number> to your launch command. Update the .env file's URL to reflect the new port, e.g., pnpm dev --port 3001 changes the URL to http://localhost:3001.

Begin your Vuexy adventure with joy and efficiency! ๐Ÿš€