Skip to main content

Comprehensive Guide to Setting Up a Svelte Project Using a Compressed File

This guide will walk you through the process of setting up a project using a compressed file. Please follow the steps below carefully.

danger

Ensure that the package.json file is present in your project.

Compressing the Project​

To compress a file on Linux-based operating systems, you can use the following command:

zip -r project.zip project_folder
caution

Please note that the compressed file format must be zip. Avoid using other compression formats (such as rar, gz, 7z) when uploading to Kubar.

1. Initial Setup​

Svelte

Application Name​

First, choose a suitable name for your application. This name will be used as the identifier in your project's domain.

caution
  • Use lowercase letters and only - as a separator between words.
  • You cannot change the application name after creating the app.

Node Version​

Select the Node version to be used in your project. You can choose from the available list or manually enter the version. Please ensure that the Node version you use is available in the Docker Hub or other related Docker repositories.

After completing this step, select the "Next" option.

2. Advanced Settings (Optional)​

Svelte

In this section, you can apply more precise settings for your project:

Build​

Sample package.json file:

{  
  "name": "my-svelte-project",  
  "version": "0.0.1",  
  "private": true,  
  "type": "module",  
  "scripts": {  
    "dev": "vite dev",  
    "build": "vite build",  
    "preview": "vite preview",  
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",  
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",  
    "lint": "eslint .",  
    "format": "prettier --write ."  
  },  
  "devDependencies": {  
    "@sveltejs/adapter-auto": "^3.0.0",  
    "@sveltejs/kit": "^2.0.0",  
    "@sveltejs/vite-plugin-svelte": "^3.0.0",  
    "@typescript-eslint/eslint-plugin": "^6.0.0",  
    "@typescript-eslint/parser": "^6.0.0",  
    "eslint": "^8.55.0",  
    "eslint-config-prettier": "^9.1.0",  
    "eslint-plugin-svelte": "^2.35.1",  
    "prettier": "^3.1.1",  
    "prettier-plugin-svelte": "^3.1.2",  
    "svelte": "^4.2.7",  
    "svelte-check": "^3.6.0",  
    "tslib": "^2.4.1",  
    "typescript": "^5.0.0",  
    "vite": "^5.0.3"  
  },  
  "dependencies": {  
    
  },  
  "engines": {  
    "node": ">=18.0.0"  
  }  
}

Build Command​

  • Specific command(s) for building the project
  • Default: npm run build
  • To use multiple commands, use ; as a separator (e.g., npm run build;npm run start)

Run Command​

  • Command to run the project
  • For Svelte.js, it is better not to enter any command

Output Folder​

  • Location of the built files
  • Default: dist/

Port​

Specify the port number on which your application will run. The default port is 5173, but you can change it.

tip
  • After the initial setup, you can change the port
  • When specifying the port, always use the address 0.0.0.0.

Resource Scheduling​

Disk​

Environment Variables​

3. Selecting a Plan​

Svelte

In this step, select your desired plan. You can choose from the available list or configure it manually.

Replica​

Specify the number of replicas (executable instances) for your application. This number affects the performance and availability of your application.

Importance of Replica Count​

  • Scalability: Increase processing power by increasing the number of replicas
  • High Availability: Maintain performance in case one instance fails
  • Load Distribution: Distribute the load across multiple instances

After selecting the desired plan, choose the Create App option.

4. Uploading the File​

Svelte

After creating your Svelte app, upload the compressed project file by clicking the "Upload File" button. Wait for the project to build.

5. Project Management​

Svelte

After the project is built, you can manage your project from the "Project Management" section.
This section provides you with project management features:

  • Check project status

  • Manage connections and resources

  • Manage ports

    info

    The port you defined in your project must also be defined in this section.

  • Change the Dockerfile name (if needed)

    tip

    If your project requires very specific settings, you can create a custom Dockerfile. For more information, refer to this link.

  • Change the build command

    Svelte

  • Change the run command

    Svelte

  • Specify the output folder location

    Svelte

tip

If you want to use multiple commands for building the project, use ; as a separator (e.g., npm run build;npm run start).

Using these features, you can effectively manage and maintain your project.