Giter VIP home page Giter VIP logo

vscode-azureappservice's Introduction

Azure App Service for Visual Studio Code (Preview)

Version Installs Build Status

App Service is Azure's fully-managed Platform as a Service (PaaS) that lets you deploy and scale web, mobile, and API apps. Use the Azure App Service extension for VS Code to quickly create, manage, and deploy your websites.

Visit the wiki for more information about Azure App Service and how to use the advanced features of the extension.

Sign up today for your free Azure account and receive 12 months of free popular services, $200 free credit and 25+ always free services 👉 Start Free.

Installation

  1. Download and install the Azure App Service extension for Visual Studio Code

    If you're interested in deploying single page web apps or progressive web apps (something without an express server), install the Azure Storage extension

  2. Wait for the extension to finish installing then reload Visual Studio Code when prompted
  3. Once complete, you'll see an Azure icon in the Activity Bar

    If your activity bar is hidden, you won't be able to access the extension. Show the Activity Bar by clicking View > Appearance > Show Activity Bar

  4. Sign in to your Azure Account by clicking Sign in to Azure…

    If you don't already have an Azure Account, click "Create a Free Azure Account"

Deploy your first app to Azure

Once you are signed in to your Azure account and you have your app open in Visual Studio Code, click the Create Resource button - it's the plus icon - to create a Web App.

Create resource

Select "Create App Service Web App..."

Create resource

Tip: Be sure that your application is listening on the port provided by the PORT environment variable: server.listen(process.env.PORT)

  1. Type a globally unique name for your Web App and press Enter. Valid characters for an app name are 'a-z', '0-9', and '-'
  2. Choose your Runtime stack

Activity Log

Once your Web App has been created, reveal the resource in the Resource explorer, right click on the Web App and select "Deploy to Web App...".

Deploy to Web App

  1. Select your current workspace if you have your app open already or browse to the directory containing your application code

Click Yes if prompted to update your configuration to run npm install on the target server.

Update build notification

Once the deployment starts, you're prompted to update your workspace so that subsequent deploys from this workspace automatically deploy to the same App Service web app. Choose Yes to ensure your changes are deployed to the correct app - you can change this later by editing your workspace settings (in .vscode/settings.json).

Always deploy notification

Once the deployment completes, click Browse Website in the prompt to view your freshly deployed website.

Stream Your Application Logs

  1. In the Azure App Service explorer, expand the app then expand Logs
  2. Click on Connect to Log Stream...

Connect to Log Stream

  1. Choose Yes when prompted to enable logging and restart the app

    File logging is disabled by default and will automatically be disabled within 24 hours

  2. The Visual Studio Code output window opens with a connection to the log stream
Connecting to log stream...
2019-01-06T07:36:52  Welcome, you are now connected to log-streaming service.
2019-01-06 07:37:08.038 INFO  - Starting container for site
2019-01-06 07:37:33.273 INFO  - Container mahernaexpress_0 for site mahernaexpress initialized successfully.

Known Issues

  • Local Git deployment may fail with large commits

Contributing

There are a couple of ways you can contribute to this repo:

  • Ideas, feature requests and bugs: We are open to all ideas and we want to get rid of bugs! Use the Issues section to either report a new issue, provide your ideas or contribute to existing threads.
  • Documentation: Found a typo or strangely worded sentences? Submit a PR!
  • Code: Contribute bug fixes, features or design changes:
    • Clone the repository locally and open in VS Code.
    • Run "Extensions: Show Recommended Extensions" from the command palette and install all extensions listed under "Workspace Recommendations"
    • Open the terminal (press CTRL+ `) and run npm install.
    • To build, press F1 and type in Tasks: Run Build Task.
    • Debug: press F5 to start debugging the extension.

Legal

Before we can accept your pull request you will need to sign a Contribution License Agreement. All you need to do is to submit a pull request, then the PR will get appropriately labelled (e.g. cla-required, cla-norequired, cla-signed, cla-already-signed). If you already signed the agreement we will continue with reviewing the PR, otherwise system will tell you how you can sign the CLA. Once you sign the CLA all future PR's will be labeled as cla-signed.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Telemetry

VS Code collects usage data and sends it to Microsoft to help improve our products and services. Read our privacy statement to learn more. If you don’t wish to send usage data to Microsoft, you can set the telemetry.enableTelemetry setting to false. Learn more in our FAQ.

License

MIT

vscode-azureappservice's People

Contributors

alexweininger avatar auchenberg avatar beaudryj avatar bwateratmsft avatar changsi-an avatar chrisdias avatar dependabot[bot] avatar digeff avatar ejizba avatar fiveisprime avatar flanker32 avatar github-actions[bot] avatar jamisonvalentine avatar jdneo avatar johnpapa avatar microfish91 avatar microsoftopensource avatar mike-kaufman avatar motm32 avatar mrcrane avatar msftgits avatar neelip avatar nturinski avatar stephenweatherford avatar sunmorgus avatar v-wuzhai avatar wangmingliang-ms avatar whiskeyjay avatar yujhongmicrosoft avatar zooba avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vscode-azureappservice's Issues

Wizard input box validation throw error when value is null

This is from telemetry data:

2017-09-15T06:51:08.839Z
vscode-azureappservice/WebAppCreatorError

step
Select or create App Service Plan

error
{"Error":"Error","Message":"Cannot read property 'trim' of null"}

It seems somehow the value passed to the validation handler can be null. Should handle that case.

use variable in bash script

the bash script that gets created has a hard coded cdias-appname-site.git in the comments:

# git remote add azure "https://$USERNAME@$SITENAME.scm.azurewebsites.net/cdias-appname-site.git"

we should be able to use $SITENAME instead:

# git remote add azure "https://$USERNAME@$SITENAME.scm.azurewebsites.net/$SITENAME.git"

Use color icons

use the color icons, or at least make it an option in settings. It is hard to tell what they are otherwise.

image

Create New App Service

Adds a new command -
Azure App Service: Create

The command will prompt for a bunch of inputs to fill up the necessary parameters for creating a new Web App.

Show the service's state

We allow stopping, starting, etc. But we can't tell if the service is running or stopped right now. Add a state indicator.

image

Perf optimization for large data

Currently when we load data (subscriptions, apps) we load all of them at once. Should consider optimizing it: caching, background pre-loading, and "Load more..."

Show app setting value as a child node of the key

Today we have the key and value in the same node separated by a colon. I propose we display the value as a child node of the key for a few reasons:

  1. If the key and/or value has a colon it can be hard to distinguish where one starts and the other ends
    screen shot 2017-10-03 at 9 38 51 am
  2. People often put secrets in application settings. This way they could look at all of their keys and individually show/hide the value as desired.
  3. I see users changing values more often than keys. I was actually suprised when I clicked 'edit' and the key popped up. This way we could have an edit action on each node with only one input box each.

Loading . . . node stays infinitely

If Azure Token credentials expire or are altered, the Loading . . . node never resolves and there is no indication that it is not Loading.

A refresh will bring the Sign into Azure. . . node.

use quickpickoptions.ignoreFocusOut = true

When I start the process of creating a site I am prompted with a set of quick pick questions (resource group, location, etc.). If at any time I click away from the quick pick box, the quick pick box goes away and i have to start the whole process over again.

You can make the quick pick not go away by setting the quickPickOptions.ignoreFocusOut to True.

Looking at the code, the easiest solution may be to add this to src/wizard.ts in the showQuickPick method. Simply add options.ignoreFocusOut = true before the invocation of showQuickPick:

    async showQuickPick<T>(items: QuickPickItemWithData<T>[] | Thenable<QuickPickItemWithData<T>[]>, options: vscode.QuickPickOptions, token?: vscode.CancellationToken): Promise<QuickPickItemWithData<T>> {
        
        options.ignoreFocusOut = true;
        const result = await vscode.window.showQuickPick(items, options, token);

        if (!result) {
            throw new UserCancelledError();
        }

        return result;
    }

But, I'll leave it up to you if that is the correct place in the code base :)

Show progress indicator on Quick Pick

When loading data from Azure, we should show Quick Pick immediately with progress indicator instead of waiting for data being loaded then show Quick Pick.

Show the functions

Show the name of the functions in the function app. we cant see them now,

image

give bash script a file name

after creation of a site i get a nice bash script, but it is named untitled-1.

while the mime type is set correctly (bash script), i suggest giving the file a name such as deploy.sh, much in the same way as the cosmosdb extension creates a results.json file.

Enable FilesNodes

Add FilesNodes back when the node can tell a full end-to-end user story.

"Quick Create Web App" alternative

Current "Create New Web App" wizard has too many prompts, we should consider have a "Quick Create" alternative so users can create a new web app after answering two or three prompts.

Or, the extension should have settings that remember certain default settings, for example, the Node.js version, so it won't prompt each time a user wants to create a new web app.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.