Question 103664 in Azure Question posted in
The official documentation to get you started can be found here.

Running Storybook in Azure App Service (not Static Storybook)

I have Storybook running locally without issue. I am able to start it with the npm run storybook command. However, when I try to host Storybook in an Azure App Service, it fails to load with the following error after running the npm run storybook:

You do not have permission to view this directory or page.

I tried building storybook into the static files and setting the App Service default document to index.html, but we require using the storyStoreV7 option which doesn’t work in static builds. If the static files worked with storyStoreV7 I would not use an App Service and just build the static files: https://github.com/storybookjs/storybook/issues/16967

Since Storybook doesn’t have a traditional start page (from what I can see) versus a node app running a server.js and I want to run the full Storybook with the node modules in my Azure App Service node app, how do I get it to load?

When I run the npm run storybook command in Storybook, it acts like it is starting the app, but again, nothing shows at the https://mystorybook.azurewebsites.net URL except the earlier mentioned error.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    After digging in more, it kept erroring on a fetch to stories.json so I needed to change my web.config to this:

        <configuration>
<system.webServer>
            <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
     </staticContent>
</system.webServer>
</configuration>

    This is per: https://learn.microsoft.com/en-us/archive/blogs/africaapps/how-to-serve-static-json-files-from-a-windows-azure-website

    With this in place it can read stories.json and render storybook. I also needed to have index.html as a default document on the App Service as that is the start point of the static build (I extract the static-storybook files to the wwwroot of the Azure App Service).

    This does leverage the static build, and resolves the issue as stories.json not getting loaded was the issue.


  2. 0

    • Here I was able to deploy the storybook-react app by deploying using local git and adding the starting commands

    • you can set deployment strategy using the deployment center tab in the azure portal just push the local git repro to the link provided in the portal

    enter image description here

    output:

    enter image description here

    Login or Signup to reply.
  3. 0

    UPDATE! In Storybook 7, to publish Storybook on Azure App Service, no package.json or server scripting is needed. Use the same method as Storybook 6 publication, but the web.config file must also list mime types for other files it may need especially the new .mjs files. For example:

    <?xml version="1.0"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".mjs" mimeType="text/javascript" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
  </system.webServer>
</configuration>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search