Project Setup
Install Jumbo 7.x vite version for your project
Starting up with a new SPA project? Don't worry, Jumbo offers a starter-template for the SPA using one of the most popular CLI tool vite which provides the base to your project and then gradually you can start adding more and more components (either from what we have show cased in the Jumbo Demo from the full demo folder) or from the other third party libraries available.
Step 1: Use Our Starter Template
To start your SPA project using the Jumbo template, follow these steps:
Download the Starter Template: Obtain the latest version of the Jumbo starter template from either Themeforest.net or from the GitHub repository where you purchased it.
Via Github
Clone the Repository from Github
Switch to the branch vite-spa-starter-template
Copy all of the files and folders available there
Create a project to your desired folder location and paste all the files and folders there
Use the Terminal to visit to the above project folder you have created
Via ThemeForest
Unzip the downloaded file from your themeforest.net account. After the unzip, you will find a file "vite-spa-starter-template.zip" in there.
Copy and paste this file to the folder location where you want to create your project.
There you can unzip the file which will create a folder there with the name "vite-spa-starter-template"
You can rename the folder to the desired project name you want to give it to
Now, use the Terminal to visit to the above project folder location.
Step 2: Install Dependencies
Once you have navigated to your project directory, you need to install all the necessary packages. These packages are listed in the package.json file. Run the following command to install them:
This command will download and install all the dependencies required for the project to run.
Step 3: Run the Project in Development Mode
To start the project in development mode, use the following command:
This command will start a local development server and you will be able to view your project in your browser at http://localhost:[PORT_NUMBER]. Any changes you make to the code will automatically reflect in the browser.
Step 4: Create a Build for Production
When you're ready to deploy your project, you need to create a production build. Run the following command to create a build:
This command will optimize and compile your project into static files for production. The output will be in the /dist folder, ready to be deployed to your hosting provider.
Step 5: Preview the Build
Once the build is ready, you can preview its functioning by running the following command.
With these steps, you should be able to set up and run your Jumbo Vite project smoothly.
Last updated