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.
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
output:
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.
Related
I am running a node site on an Azure App Service but it won't start with the following line in my package.json scripts.
"scripts": {
...
"serve": "node -r dotenv-azure/config dist/server.js",
...
},
The -r flag is required to preload environment variables using dotenv-azure, as per their own instructions... https://www.npmjs.com/package/dotenv-azure
it works absolutely fine on localhost (Windows), it loads the config before starting the server. On Azure App service (windows) however it fails to start the server and I get a 503 error after starting it.
I have tried switching on application logging but because it can't even start the server I get nothing in the logs.
After add httpplatformhandler in web.config file, it works for me. You can download my sample code from github. You will find my web.config file.
Test Steps：
1. Create a sample code.
2. Create .env file.
3. Test result in local.
4. Deploy by git.
After deployed, it also has some error, we should add web.config to solve it.
After add web.config file ( With httpplatformhandler):
I'm using .net core and ServiceStack Angular SPA project template, and I want to enable hot reloading.
From what I saw on site here I only need to add:
Plugins.Add(new TemplatePagesFeature());
<i hidden>{{ '/js/hot-loader.js' | ifDebugIncludeScript }}</i>
And:
SetConfig(new HostConfig
{
DebugMode = true
});
And this works for HTML files, however, nothing happens when I modify TS files (in console or browser), do I need to configure something else in order to allow that?
EDIT
I thought that this will also start something like npm run dev (to run --aot) but does not look like that, so my temporary solution until I find more elegant way is to use something like this and shell extension:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.Shell("npm run dev");
}
The Development workflow for each template can be found on the project page for each template. E.g. the Angular SPA Project Template requires that you run either npm run dev or npm run serve which starts a watched client build:
Development workflow
Our recommendation during development is to run the dev npm script or Gulp task and leave it running in the background:
$ npm run dev
This initially generates a full development build of your Web App then stays running in the background to process files as they’re changed. This enables the normal dev workflow of running your ASP.NET Web App, saving changes locally which are then reloaded using ServiceStack’s built-in hot reloading. Alternatively hitting F5 will refresh the page and view the latest changes.
Each change updates the output dev resources so even if you stop the dev task your Web App remains in a working state that’s viewable when running the ASP.NET Web App.
Live reload with built-in Dev Server
The alternative dev workflow is to run the serve npm or gulp script to run Create React App's built-in Webpack dev server:
$ npm run serve
This launches the Webpack dev server listening at http://localhost:4200/ and configured to proxy all non-Webpack HTTP requests to the ASP.NET Web App where it handles all Server API requests. The benefit of viewing your App through the Webpack dev server is its built-in Live Reload feature where it will automatically reload the page as resources are updated.
Watched .NET Core builds
.NET Core projects can also benefit from Live Coding using dotnet watch which performs a “watched build” where it automatically stops, recompiles and restarts your .NET Core App when it detects source file changes. You can start a watched build from the command-line with:
$ dotnet watch run
I have deployed NodeJS application on Azure Web Apps. How to pass flags to NodeJS's Chrome V8 engine?
In my local machine I can do it easily while running the server script as below.
node -nouse-idle-notification -expose-gc -max-old-space-size=8192 server.js
Where to specify these flags in Azure Web Apps?
You can do this either in iisnode.yml or in web.config. If you are deploying via git, you likely don't have those in your repo. You can get the default generated web.config by using Kudu Console and finding it under d:\home\site\wwwroot. By default, there is no iisnode.yml at all.
Using iisnode.yml
Just put the following line in the iisnode.yml:
nodeProcessCommandLine: node.exe --nouse-idle-notification --expose-gc --max-old-space-size=1024
Or if you use a full path to a version of Node, you'll need to quote it, e.g.
nodeProcessCommandLine: "D:\Program Files (x86)\nodejs\5.7.1\node.exe" --nouse-idle-notification --expose-gc --max-old-space-size=1024
Using web.config
Toward the end of the file, you'll see a commented out <iisnode> tag. Replace it by something like this:
<iisnode nodeProcessCommandLine="node.exe --nouse-idle-notification --expose-gc --max-old-space-size=1024"/>
Notes
iisnode.yml takes precedence over web.config
I lowered your max-old-space-size value as that was blowing up when I tried, but that's orthogonal.
Then with either file, you can commit them in your repo so it just works on deployment.
I have created a node.js application in Visual Studio 2015 using the Azure SDK 2.7 and the Node.js Tools.
I have successfully set up CI with BitBucket in my web app and I can see that changes to the repository do indeed trigger a build and deploy.
However, the page I reach (http://ftct.azurewebsites.net/) complains: You do not have permission to view this directory or page.
I have specified a default file (kinda) in my node.js by using: app.get('/', routes.index);
So trying to navigate directly to this file, http://ftct.azurewebsites.net/signin.html, yields a different error: The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
I configured the app to run on port 1337 in Visual Studio, but using this port doesn't overcome the problem. Trying to navigate to a ported address yields a timeout.
Any ideas?
I had the same issue,
you need web.config, package.json, server.js at the root
web.config:
<configuration>
<system.webServer>
<handlers>
<!-- indicates that the app.js file is a node.js application to be handled by the iisnode module -->
<add name="iisnode" path="server.js" verb="*" modules="iisnode" />
</handlers>
</system.webServer>
</configuration>
in package.json you need to have:
...
"scripts": {
"start": "node server"
},
...
and in your server.js make sure that you set the server port number to
process.env.PORT || 1337;
Edit: Try creating "Node JS Empty Web App" from the gallery at https://portal.azure.com and compare the web.config and the site with what you have. It's possible that you're missing some config settings.
Previous answer: first off, only ports 80 and 443 are available in Azure Web Apps (the new name of Azure Websites). So port 1337 will not work. Reconfigure your app to run on port 80 or 443. Regarding the permission issue, do you have App Service Authentication enabled? Make sure that is disabled, by editing the Web App's application settings as below.
You can try to create a instance of "Node JS Empty Web App" from the Gallery at the old portal http://manage.windowsazure.com, see below.
Then, doing the set up deployment from source control at the quick glance of the web app dashboard page to deploy your web app.
Now, browse the web app http://<app-name>.azurewebsites.net that works fine.
You're probably missing the web.config file which is required if iisnode is used to run node processes behind iis or iis express.
https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
In my case, I got this error when using ZipDeploy: please be sure to compress files within the root folder, so that the Node.js files could be listed on Kudu at the a base level, instead of one folder more. Thanks to mike-urnun-msft.
Also when you deploy the zip file via the azurewebsites.net/ZipDeployUI, make sure that you see the files being unzipped on the /wwwroot level.
If the files show up under /wwwroot/your-app-folder/ you may get this permission issue. I took a long time to figure this out! Hope it helps.
My situation is similar but slightly different. I was working on the Facebook Messenger Platform "Setting Up Your Webhook" documentation steps.
localhost was working just fine, but upon deployment, it would simply say what others have noted.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
my final package.json looked like it, and it worked.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js"
},
I think, the issue boils down to the way facebook provided the demo code. The demo code simply does not have everything needed to deploy specifically on azure.
I have put my final code here (it can be used as a starter i think for another person who is running into deployment issues).
Also, interestingly enough, others have suggested web.config, but I did not need it really.
https://github.com/Jay-study-nildana/FBMessengerWebHook
The problem is most likely the wrong folder was pushed up. For an ASP.NET server the root folder must have the index.html file.
Angular Specific
Before deploying issue ng build --prod in your dev environment.
This creates a 'dist' folder in the solution.
Next open Visual Studio Code to the first folder in the 'dist' folder.
In this case the folder name was 'resume' which just so happened to be the Angular project name. Note that the index.html file is in this folder.
Note you know you are on the right track when pushing this up because this folder is small and it finishes quickly.
I use the Azure tools plugin for VSCode, it simply prompts me for the proper subscription (your Microsoft account) and from there just click the up arrow for the upload!
We are currently moving a self-hosted koa app to IISNode on Azure WebSites..
In self-hosting, we initiallize the application by calling
node --harmony ./bin/application
Requests then go to ./index.js.
However we could not find how to setup IISNode to call "bin/application" at initialization time.
Any ideas?
Thanks
Not sure this is the same scenario, but I ran into something that sounds like this when express.js started using ./bin/www as the entry point for express.js apps. Initially it broke everything, but now we look for the "scripts" entry in the package.json to tell Azure how to configure IISNode for the application. For express, it generates a "scripts" entry that looks like this:
"scripts": {
"start": "node ./bin/www"
},
When Azure sees this, it generates a web.config on the server that uses ./bin/www for the entry point.
So... I'd say first off, try adding a "scripts" entry to the package.json that points to your ./bin/application file, and try deploying that to Azure. Hopefully that 'just works'. If it doesn't, try adding a web.config to the root of your application, using https://gist.github.com/Blackmist/8677359708fd30779c77 as the contents. This should point IISNode to the ./bin/application file as the entrypoint, and is what Azure Websites should automatically generate when it sees the "scripts" entry in the package.json file.
The other problem you'll run into is using Node.js v0.11.13, which I don't believe is included in Azure websites by default, and passing the --harmony switches. http://azure.microsoft.com/en-us/documentation/articles/nodejs-specify-node-version-azure-apps/ has a section on including a version of node.js as part of your website. In the iisnode.yml file, you'd want to have a line similar to the following:
nodeProcessCommandLine: d:\home\site\wwwroot\bin\node.exe --harmony
I believe this should make this work.
You can setup custom deployment scripts for Azure Websites.
This blog post contains details on how to use it:
http://blog.amitapple.com/post/38417491924/azurewebsitecustomdeploymentpart1/#.VBcrnPldXIc