How to Host Your Krpano Virtual Tour for Free (With Step-by-Step Instructions)

Table of Contents

Krpano empowers you to craft stunning 360-degree virtual tours, but sharing your masterpiece can be costly and complex. Enter the dynamic duo of AWS S3 cloud storage and Panoee S3 hosting service, your gateway to free and effortless virtual tour hosting.

AWS S3, your generous cloud storage companion, offers a complimentary tier for beginners, embracing your virtual tour aspirations without breaking the bank. Panoee S3 hosting service, your virtual tour concierge, seamlessly connects your AWS S3 bucket to the web, effortlessly serving your virtual tour files with utmost efficiency. Here is how you can host your Krpano virtual tour with the lowest hosting fee

Step 1: Export the Krpano virtual tour

Prepare your Krpano virtual tour for online hosting by exporting it as web-ready output from the software. This process generates the necessary files to ensure a seamless presentation of your virtual tour within web browsers.

How to Host Your Krpano Virtual Tour for Free (With Step-by-Step Instructions) — Export your Krpano virtual tour as a folder

IMPORTANT: You need to change the tour.html name to index.html before uploading your Krpano virtual tour to the Panoee S3 hosting service to make it work

Step 2: Create your AWS Credential

Create your AWS Account

CleanShot 2023 11 17 at 23.06.25%402x scaled — Click button “Create an AWS Account”

CleanShot 2023 11 17 at 23.07.37%402x scaled — Follow AWS guide to create new account with your email address.

After signing up, please login AWS console with your account.

Setup AWS S3

CleanShot 2023 11 17 at 23.10.27%402x scaled — In AWS Console, search for service “S3”

CleanShot 2023 11 17 at 23.11.27%402x scaled — Click button “Create bucket” to create your very first Bucket – Bucket is the Storage where you create & manage folders. Each folder can be used to host one Virtual Tours.

Create S3 bucket S3 Global create bucket scaled — Following all above steps to create & intial setup your bucket. Please notice that your bucket needs to be set “public” & allow enough permission so we can manage it remotely & viewers can access files in your project to view the Virtual Tours.

CleanShot 2023 11 17 at 23.20.30%402x scaled — After create new bucket, you will be redirect back to Bucket listing page. Please notice that your bucket should display like above.

CleanShot 2023 11 17 at 23.23.37%402x scaled — Click the Bucket to go inside, switch to tab “Properties” and click button “Edit” in panel “Static website hosting”. This options allows files in bucket can be served under specific URLs so viewers can view your Virtual Tours via file “index.html”.

Edit static website hosting S3 bucket mypanoeesample S3 Globa — Follow steps above to setup “Static Website Hosting” options.

CleanShot 2023 11 17 at 23.24.54%402x scaled — After config, you will see above information in panel “Static website Hosting”

mypanoeesample S3 bucket S3 Global scaled — Follow steps to configure Bucket Policy & CORS rule in tab “Permission”. For each section, you need to click button “Edit” to start editing. Please copy below code and paste into corresponding area.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:DeleteObject",
                "s3:GetObject",
                "s3:ListBucket",
                "s3:PutObject"
            ],
            "Resource": [
                "arn:aws:s3:::mypanoeesample/*",
                "arn:aws:s3:::mypanoeesample"
            ]
        }
    ]
}

For bucket policy, please notice that you needs to insert your bucket name in codeblock “Resources”

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2",
            "ETag"
        ],
        "MaxAgeSeconds": 86400
    }
]