Woop woop

I recently found a solution for a bugging problem in the flutterverse. That is getting images to render on web from firebase storage.

What is CORS ?

CORS stands for Cross-Origin Resource sharing. This allows for files folders to be shared and accessed on other domains. As you know firebase storage works more like Amazon S3 bucket or even Cloudinary, they store image and give you urls to allow you to remotely access the images. This way your application is faster and lighter as there are no static images that are store in the project.

I struggled with it but I finally found a way out let’s crack it:

Google

Flutter and firebase are all google products managed and maintained by google. Thus the solution I am going to explain below is google based. If you have found other ways please let me know

Setup System

1. Install Requirements

   Check if your system has python with at least version 3.8.6 and higher. You can use the below command to check the python version

python --version

If you do not have python installed on your machine please ensure that you install as it is required for the tools ahead.

3. Install GSUTIL

   This is a tool that Google have created to make interaction with there software easier. It allows for users to access the command line from the terminal of your machine.

   At the time of this article the LTS for this tool is gsutil NOTE: This package is the apple silicon chips

   Please refer to google for the latest versions

4. Install Google-CLOUD-SDK

   Install google cloud cli this makes interactions with the google projects seamless and easier to configure gsutil to your specific project.

   Once that has been downloaded ensure you extract the file, now in the root folder of where the file has been downloaded

   Run an installation script

./google-cloud-sdk/install.sh

You will be asked a series of yes/no questions by google. Once done close and open a new terminal

Now you can initialise the cli

./google-cloud-sdk/bin/gcloud init

During the initialisation process you will be prompted to select a project. Select on the project that you wish to add CORS to and continue.

Project

Now that the system is ready let us get cracking on the project. In the root of the project create a new file called cors.json the file has to be a json file. Now inside the file we are going to define the actions of the CORS

[
    {
        {/* Allow for all domains to access the resource */}
        "origin": ["*"], {/* If you want to limit to a domain you can pass it in origin e.g https://wick.com */}
        "method": ["GET", "POST"], {/* These are the methods that can make a request to firebase cloud storage */}
        "maxAgeSeconds": 3600
    }
]

Once that has been done now all that is left is ensuring that the project reads the CORS file. This is achieved in the google cloud CLI. Open the terminal in the project and run this command in the terminal

gsutil cors set cors.json storage_url

In the storage url get the specific project firebase storage url

The url can be gotten from the firebase cloud storage dashboard. The url will look like this:

gs://example.appspot.com

once the url has been appended you can fire the request. You are now able to see your images load on your chrome webpage.

Conclusion

This solution is sound and straight forward. Hope you have fun learning this as I did doing my research to get it. See you soon