Blog

Downloading multiple images from Sitecore

Initially it seems like an easy request, "can I have a copy of the images from this folder including all the sub-folders", and then you remember Sitecore stores all the images in the DB so those folders that they're in aren't real file folders for you to copy and paste from. Hopefully you check the admin for an export button only to discover that the only download button for an image is on the individual image, not the folder. Being a developer faced with the prospect of having to click a download button on an unknown number of images, you do what every good developer does and try and find an alternative.

The good news is your in luck, there is a way and I'm going to tell you it.

Sitecore Powershell Extensions

Not only is Sitecore Powershell extensions a great way of writing scripts to interact with your Sitecore DB without having to do code releases. It also comes with the exact script you need!

First head over to the Sitecore Marketplace and download the correct package for your Sitecore version. https://marketplace.sitecore.net/en/Modules/Sitecore_PowerShell_console.aspx

Installation is simple, you just install the package, no config changes needed.

Now go to the media library and right click the folder you want to export. In the context menu, select scripts and then download.

Just like that, a dialogue appears asking you if you want to download the zip it just created. Click download and you will have all the images.

They will even be organized with the correct folders inside.

Data Fetching options with NextJS

When it comes to building websites in node, I'm a big fan of using NextJS. There's a lot of static site generators around but one of the things I really like about NextJS is not only the fact you have different options for data fetching, but that they're also really easy to use.

Static Generation

If you've somehow missed it, static site generation is the idea that to make your site run as fast as possible for every user, you pre-generate all the pages so that when a visitor makes a request for the page, all the server needs to do is return a file. It's a bit like the start of the internet when everything was an html file, before we became clever and started generating files dynamically on the fly. With all the processing removed, the time to first byte is greatly reduced.

To do this with NextJs you add a function called getStaticProps to your page and when the site is built, this will get all the static content and make it available to the page to be pre-generated.

export async function getStaticProps(context) {
return {
  props: {}, // will be passed to the page component as props
}
}

Or if your using TypeScript.

import { GetStaticProps } from 'next'

export const getStaticProps: GetStaticProps = async (context) => {
// ...
}

Static Generation for Dynamic Paths

So that last example would generate content for a page, but what if you have a headless CMS and unlimited pages. You certainly couldn't create a file for each one with it's own getStaticProps function.

For this there is getStaticPaths. Like getStaticProps this function will run at the build time and is used to find and return all the dynamic paths for the page. Think of your page as the page template and this function is getting all the pages that relate to it. This is how I generate all the blog post pages on this site.

The function returns an object with two values. First paths which is a list of all the routes and the parameters for them. e.g. a list of the id's to get the data for a page with. The second is fallback: false, this tells NextJs that if the request is for a route not in the paths list, then returns a 404.

export async function getStaticPaths() {
return {
  paths: [
    { params: { ... } } 
  ],
  fallback: false
};
}

The params are then passed to the getStaticProps function so that it can pre-generate all the page content.

// This also gets called at build time
export async function getStaticProps({ params }) {
// params contains the post `id`.
// If the route is like /posts/1, then params.id is 1
const res = await fetch(`https://.../posts/${params.id}`)
const post = await res.json()

// Pass post data to the page via props
return { props: { post } }
}

If you'd prefer Typescript then this is the alternative.

import { GetStaticPaths } from 'next'

export const getStaticPaths: GetStaticPaths = async () => {
// ...
}

The Good Old Dynamic Way

Static's great, but sometimes are pages just aren't static enough for it to make sense. Here's where getServerSideProps comes in. With getServerSideProps your page will get generated on the server at runtime.

At this point you head may explode because at some point someone told you static site generators were faster, more secure etc because nothing runs on the server. Well erm.................. there is a server and it can generate files, so they were er... wrong.

export async function getServerSideProps(context) {
return {
  props: {}, // will be passed to the page component as props
}
}

Or with TypeScript.

import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (context) => {
// ...
}

Incremental Static Regeneration

Lets take are mind back to that first static page generation. It's great for the end user, but the downside is that each time you need to change something on a page you have to regenerate the entire site. On a big site, that's an issue.

Incremental Static Regeneration lets you tell NextJs that while you want the page the be pre-built, you also want that version to expire and get generated again. Think of this like the expiry time on a CDN, but configured at a page level in your site.

To use it the getStaticProps function needs to return a revalidate value. This gives the instruction of up to how frequently the page should be generated.

export async function getStaticProps() {
const res = await fetch('https://.../posts')
const posts = await res.json()

return {
  props: {
    posts,
  },
  // Next.js will attempt to re-generate the page:
  // - When a request comes in
  // - At most once every 10 seconds
  revalidate: 10, // In seconds
}
}

Part Static Generation

So lets say we don't need our pages to expire other than when we rebuild the site, and we also don't want to generate every page in our site because there 2000 of them and it will take ages, but there's also some really important pages that we don't want any user to have to wait for.

Well if we go back to our static generation for dynamic routes example and take another look at that fallback value we can do something different.

Fallback can be set to 3 values, false, true and blocking. False will return a 404 if the route didn't exist, but true and blocking gives us an option to decide at runtime if we want to generate a page or issue a 404.

Setting fallback to true will return a fallback page, getStaticProps will then generate the page and this will then get swapped with the fallback version. Blocking is similar but will wait for the new page to be generated rather than initially issuing a fallback.

By doing this, the paths we return in the props will get generated at build time (we can restrict this to just our important pages), and all the others will function like a regular CDN.

Summary

So as you can see, there's a whole host of options to fetching data, when you do it, how you do it, how long it lives for and I didn't even cover the fact you could still fetch data dynamically when the page has loaded on the client! If we did this then we can pre-generate all the static parts of our page and then populate other bits dynamically after on the client.

Protecting Azure Resources from Deletion

There's a lot we can do in Azure to protect our resources from harm.

First security permissions can be set up using active directory groups, so that access can be restrict to certain member to actually do anything with a resource. There's the fact that resources exist on more than one server so that if a server fails another already has a copy ready to switch to. We can even use ARM templates to have our entire infrastructure written as code that can be redeployed should the worst happen.

However what if we have some blob storage with some important data and we accidentally just go and delete it? Sometimes human error just happens, sure we can recreate it with our ARM template, but the contents will be gone.

Or maybe we're not using ARM templates and did everything through the portal so we'd really like to just make sure we didn't delete stuff by accident.

Azure Resource Locks

One thing we can do is to set up Azure Resource Locks. This isn't the same thing as setting up backups (you should absolutely do that to), but this is a nice extra thing you can do to prevent you from deleting something by accident. It's also really simple to do too.

In the Portal

If your doing everything direct in the portal, open your resource and look for locks in the left nav.

Now click the add button. Give it a name, lock type of delete and a note for what it does.

Now if you try and delete the resource you get a friendly error message saying you can't.

ARM Template

If your using ARM templates to manage your infrastructure, then you need this little snippet of code added to your template file.

{
        "type": "Microsoft.Authorization/locks",
        "apiVersion": "2016-09-01",
        "name": "NAME OF LOCK GOES HERE",
        "scope": "[concat('Microsoft.Sql/servers/databases/', parameters('database_name'))]",
        "dependsOn": [
          "[resourceId('Microsoft.Sql/servers/databases/', parameters('database_name'))]"
        ],
        "properties": {
          "level": "CanNotDelete",
          "notes": "DESCRIPTION SAYING IT SHOULDNT BE DELETED GOES HERE"
        }
      }

Notice the scope and depends on section. These need to reference the item you want to protect.