☀️ Solar Potential demo

This is not an officially supported Google product.

The Solar API offers many benefits to solar marketplace websites, solar installers, and solar SaaS designers.

This is a demo app that showcases and displays the information from the Solar API into a map.

Before you begin

You need a Google Cloud project with a billing account and the Maps JavaScript API and Solar API enabled.

To learn more, see Set up in Cloud Console.

Additionally, you need a development environment with Node.js installed.

Google Maps API key

This app requires a Google Maps API key to work, follow the Use API Keys guide to create a new one.

Once you have your API key, update the .env file with your key.

VITE_GOOGLE_MAPS_API_KEY="My Google Maps API key"

Running the app

First, run npm install to install the required dependencies.

Developer mode

To start the app in developer mode, this allows hot-reloads. This means that every time you change a file, the app reloads itself automatically.

# Run in developer mode.
npm run dev

Production mode

Starting in developer mode enables a lot of useful tools while developing, but for a production version we first need to build the app.

# Build the app.
npm run build

# Start the app.
npm run start

Deploying to Cloud Run

One option to deploy your app is with Cloud Run. It's easy to use and allows us to build and deploy scalable containerized apps written in any language on a fully managed platform.

For some languages like Node.js, it infers the configuration and can deploy from source directly, without any additional configurations! This uploads your source, builds it with Cloud Build, deploys it to Cloud Run, and starts the service with npm run start. All with a single command.

# Choose the Cloud location to deploy the app.
export LOCATION="us-central1"

# Build and deploy the app from source.
gcloud run deploy "solar-potential" \
  --source="." \
  --region="$LOCATION" \
  --allow-unauthenticated

Checking your code

You can use npm run check to do type checking and check for other common issues. You can also use npm run check:watch to continuously check your code when you save your changes.

To check for styling and formatting issues, you can use npm run lint. To fix any lint issues, use npm run format to automatically format all the code base.

Tech stack

• Solar API: Get solar panel configurations, solar potential, and data layers.
• Google Maps: Display a custom map with the Google Maps JavaScript API.
• Material Desgin 3: Material Design 3 web components.
• SvelteKit: Compiler framework to develop declarative reactive web apps with TypeScript.
• Vite: Build tool with a fast development experience for modern web projects.
• Tailwind: CSS framework for design and styling.
• ESLint: Statically analyze code to quickly find problems.
• Prettier: Opinionated code formatter.