Latest Bing Wallpaper

A web application to display the latest wallpapers from Bing.com. Useful when neither BingWallpaper app or BingDesktop app are available.

Use of these images is restricted to wallpaper only, as per Bing terms of use.

⇒ Demo here

How?

The front-end is a React website packaged with ViteJS.

The back-end is a serverless Azure Function app.

Run locally

Run the front-end

Requirements

• NodeJS 14 or higher

Start

Copy .env.local.sample to .env.local, then:

cd app
npm install
npm run dev

Then open http://localhost:5173/ in browser of choice.

Ctrl + C to exit

Configure a database for the back-end

Some form of storage is required to store and cache the wallpaper URIs and avoid multiple requests to Bing.com.

The storage is cleaned up regularly from old entries and duplicates - so the storage size should never be too large.

An emulator can be used to run a development database locally (such as Azurite, see instructions below)

Requirements

• NodeJS 12 or higher

Start

This will install and run the Azurite emulator.

cd db
npm install
npm run dev

Ctrl + C to stop the emulator.

Run the back-end

Requirements

• .NET SDK 6.x
• Azure Function Core Tools v4.x or higher

Configuration

The storage connection string has to be configured in the AzureWebJobsStorage setting:

• Use the connection string from the storage account of the deployed Azure Function App
• For the local database set the connection string to UseDevelopmentStorage=true

Copy local.settings.json.sample to local.settings.json, then update accordingly.

Build & start

cd api/src
dotnet clean && dotnet build
func host start

Then open http://localhost:7071/api/redirection-to/latest in browser of choice.

Ctrl + C to stop the app.

Run on Azure

Requirements

• A valid Azure subscription
• A resource group
• An Function app
• A storage account (can be the same storage account as the Function app)

Front-End

The front-end is deployed as a static website within selected storage account:

• The storage account has to be general-purpose v2
• Static website hosting has to be enabled

Build and upload

cd app
npm run build

Then upload the files in dist folder to the storage account $web container via method of choice (Azure Portal, AzCopy, etc.) or via CI/CD

Back-End

The back-end is deployed to the Function app via method of choice (Azure Function Core Tools, Visual Studio, etc.) or via CI/CD

Settings

Make sure CORS is setup properly for the front-end to be able to call the back-end.

Build and upload

cd api/src
dotnet publish --configuration Release

Then upload the files in bin/Release/net8.0 folder to the Function app

CI/CD

Pipeline definitions are provided for integration in Azure DevOps

• app/azure-pipelines.yml for the front-end
• api/azure-pipelines.yml for the back-end

Requirements

Create a variable group named Azure in Azure DevOps' pipelines.

Add the following variables:

• azureSubscription : Name of the subscription to deploy to
• functionAppName: Name of the Function app
• storageAccountName: Name of the storage account
• storageAccountKey: Key for the storage account
• apiUrl: base URL of the Function app

Make sure your Azure DevOps principal has write access to the storage account:

• Add the role Storage Blob Data Contributor if necessary
• Add the role Storage Blob Data Owner if necessary
• Full instructions here

Create an environment named Azure in Azure DevOps' pipelines.

Setup two pipelines using the yaml files. On the first run, Azure DevOps will require a manual validation for each pipeline to access the variable group and environment.

License

Apache License 2.0

Copyright 2021-2024 Yvan Razafindramanana

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Third parties

The wallpaper themselves are hosted by Bing.com and copyrighted by their respective owners. Use of these images is restricted to wallpaper only, as per Bing terms of use.

This project uses open-source, third party software:

• .NET SDK : MIT License, Copyright (c) .NET Foundation
• Azure Function Core Tools: MIT License, Copyright (c) .NET Foundation
• Azurite: MIT License, Copyright (c) Microsoft Corporation
• Image Magick.NET: Apache License Version 2.0, Copyright Dirk Lemstra
• ViteJS: MIT License, Copyright (c) 2019-present Evan You & Vite Contributors
• React: MIT License, Copyright (c) Facebook, Inc. and its affiliates.

This project uses graphics under Creative Commons licence:

• Fav icon by Oh Rian: Creative Commons license (CCBY)