CDN configuration in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the CDN provider in the Remix config.

Remix

export const config = { cdnProvider: '[1]' };

Drag options to blanks, or click blank then click option'

Adatabase

Baws_s3

Clocal_server

Dcloudflare

Attempts:

3 left

💡 Hint

Common Mistakes

Using local_server or database as CDN provider which are not CDN services.

The cdnProvider should be set to a valid CDN service like cloudflare to enable CDN features.

2fill in blank

medium

Complete the code to set the cache control header for CDN caching.

Remix

headers: { 'Cache-Control': '[1]' }

Drag options to blanks, or click blank then click option'

Ano-store

Bmax-age=3600

Cprivate

Dno-cache

Attempts:

3 left

💡 Hint

Common Mistakes

Using no-store disables caching, which is not desired for CDN.

Setting Cache-Control to max-age=3600 tells the CDN to cache content for 1 hour.

3fill in blank

hard

Fix the error in the CDN invalidation code snippet.

Remix

await cdnClient.invalidate('[1]');

Drag options to blanks, or click blank then click option'

A/images/*

Bcache

Call_files

Dfiles

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic terms like 'all_files' or 'cache' which are not valid paths.

To invalidate cached images, the path pattern /images/* is used to target all files in the images folder.

4fill in blank

hard

Fill both blanks to configure the CDN origin and enable compression.

Remix

cdnConfig = { origin: '[1]', compression: [2] };

Drag options to blanks, or click blank then click option'

Ahttps://myapp.example.com

Btrue

Cfalse

Dhttp://localhost:3000

Attempts:

3 left

💡 Hint

Common Mistakes

Using localhost as origin in production CDN config.

Disabling compression reduces performance.

The origin should be the live app URL, and compression enabled with true to optimize delivery.

5fill in blank

hard

Fill all three blanks to set up CDN cache invalidation for specific paths and method.

Remix

invalidateCache({ path: '[1]', method: '[2]', recursive: [3] });

Drag options to blanks, or click blank then click option'

A/static/css/*

BPOST

Ctrue

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET method which is not suitable for invalidation.

Setting recursive to false misses nested files.

Invalidation targets CSS files with path /static/css/*, uses POST method for the request, and sets recursive to true to include subfolders.