I'm a fan of setting NODEENV explicitly every time you run the app, as in the second example (NODEENV=production node app.js). That way you potentially save yourself from some future hair-pulling in the event that you forget to set your local NODEENV back to. It is likely you do not have the permissions to access this file as the current user npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! Permissions of the file and its containing directories, or try running npm ERR! The command again as root/Administrator (though this is not recommended). Installation on Windows and Mac OS is simple, as you just have to download and run the appropriate installer and follow the familiar instructions. If you have brew on your Mac, you can also install Node.js with brew install node. In both cases, Node Package Manager (NPM) will be used to install other packages along with Node.js.
Node.js is a platform for building fast and scalable server applications using JavaScript. Node.js is the runtime and npm is the Package Manager for Node.js modules.
Visual Studio Code has support for the JavaScript and TypeScript languages out-of-the-box as well as Node.js debugging. However, to run a Node.js application, you will need to install the Node.js runtime on your machine.
To get started in this walkthrough, install Node.js for your platform. The Node Package Manager is included in the Node.js distribution. You'll need to open a new terminal (command prompt) for the
node and npm command-line tools to be on your PATH.
Linux: There are specific Node.js packages available for the various flavors of Linux. See Installing Node.js via package manager to find the Node.js package and installation instructions tailored to your version of Linux.
Tip: To test that you've got Node.js correctly installed on your computer, open a new terminal and type
node --help and you should see the usage documentation.
Hello World
Let's get started by creating the simplest Node.js application, 'Hello World'.
Create an empty folder called 'hello', navigate into and open VS Code:
Tip: You can open files or folders directly from the command line. The period '.' refers to the current folder, therefore VS Code will start and open the
Hello folder.
From the File Explorer toolbar, press the New File button:
and name the file
app.js :
By using the
.js file extension, VS Code interprets this file as JavaScript and will evaluate the contents with the JavaScript language service. Refer to the VS Code JavaScript language topic to learn more about JavaScript support.
Create a simple string variable in
app.js and send the contents of the string to the console:
Note that when you typed
console. IntelliSense on the console object was automatically presented to you.
Also notice that VS Code knows that
msg is a string based on the initialization to 'Hello World' . If you type msg. you'll see IntelliSense showing all of the string functions available on msg .
After experimenting with IntelliSense, revert any extra changes from the source code example above and save the file (⌘S (Windows, Linux Ctrl+S)). Yamaha ql5 mac apple.
Running Hello World
It's simple to run
app.js with Node.js. From a terminal, just type:
You should see 'Hello World' output to the terminal and then Node.js returns.
Integrated Terminal
VS Code has an integrated terminal which you can use to run shell commands. You can run Node.js directly from there and avoid switching out of VS Code while running command-line tools.
View > Terminal (⌃` (Windows, Linux Ctrl+`) with the backtick character) will open the integrated terminal and you can run
node app.js there:
For this walkthrough, you can use either an external terminal or the VS Code integrated terminal for running the command-line tools.
Debugging Hello World
As mentioned in the introduction, VS Code ships with a debugger for Node.js applications. Let's try debugging our simple Hello World application.
To set a breakpoint in
app.js , put the editor cursor on the first line and press F9 or click in the editor left gutter next to the line numbers. A red circle will appear in the gutter.
To start debugging, select the Run View in the Activity Bar:
You can now click Debug toolbar green arrow or press F5 to launch and debug 'Hello World'. Your breakpoint will be hit and you can view and step through the simple application. Notice that VS Code displays a different colored Status Bar to indicate it is in Debug mode and the DEBUG CONSOLE is displayed.
Now that you've seen VS Code in action with 'Hello World', the next section shows using VS Code with a full-stack Node.js web app.
Note: We're done with the 'Hello World' example so navigate out of that folder before you create an Express app. You can delete the 'Hello' folder if you wish as it is not required for the rest of the walkthrough.
An Express application
Express is a very popular application framework for building and running Node.js applications. You can scaffold (create) a new Express application using the Express Generator tool. The Express Generator is shipped as an npm module and installed by using the npm command-line tool
npm .
Tip: To test that you've got
npm correctly installed on your computer, type npm --help from a terminal and you should see the usage documentation.
Install the Express Generator by running the following from a terminal:
The
-g switch installs the Express Generator globally on your machine so you can run it from anywhere.
We can now scaffold a new Express application called
myExpressApp by running:
This creates a new folder called
myExpressApp with the contents of your application. The --view pug parameters tell the generator to use the pug template engine.
To install all of the application's dependencies (again shipped as npm modules), go to the new folder and execute
npm install :
At this point, we should test that our application runs. The generated Express application has a
package.json file which includes a start script to run node ./bin/www . This will start the Node.js application running.
From a terminal in the Express application folder, run:
The Node.js web server will start and you can browse to http://localhost:3000 to see the running application.
Great code editing
Close the browser and from a terminal in the
myExpressApp folder, stop the Node.js server by pressing CTRL+C.
Now launch VS Code:
Note: If you've been using the VS Code integrated terminal to install the Express generator and scaffold the app, you can open the
myExpressApp folder from your running VS Code instance with the File > Open Folder command.
The Node.js and Express documentation does a great job explaining how to build rich applications using the platform and framework. Visual Studio Code will make you more productive in developing these types of applications by providing great code editing and navigation experiences.
Open the file
app.js and hover over the Node.js global object __dirname . Notice how VS Code understands that __dirname is a string. Even more interesting, you can get full IntelliSense against the Node.js framework. For example, you can require http and get full IntelliSense against the http class as you type in Visual Studio Code.
VS Code uses TypeScript type declaration (typings) files (for example
node.d.ts ) to provide metadata to VS Code about the JavaScript based frameworks you are consuming in your application. Type declaration files are written in TypeScript so they can express the data types of parameters and functions, allowing VS Code to provide a rich IntelliSense experience. Thanks to a feature called Automatic Type Acquisition , you do not have to worry about downloading these type declaration files, VS Code will install them automatically for you.
You can also write code that references modules in other files. For example, in
app.js we require the ./routes/index module, which exports an Express.Router class. If you bring up IntelliSense on index , you can see the shape of the Router class.
![]() Debug your Express app
You will need to create a debugger configuration file
launch.json for your Express application. Click on the Run icon in the Activity Bar and then the Configure gear icon at the top of the Run view to create a default launch.json file. Select the Node.js environment by ensuring that the type property in configurations is set to 'node' . When the file is first created, VS Code will look in package.json for a start script and will use that value as the program (which in this case is '${workspaceFolder}binwww ) for the Launch Program configuration.
Save the new file and make sure Launch Program is selected in the configuration drop-down at the top of the Run view. Open
app.js and set a breakpoint near the top of the file where the Express app object is created by clicking in the gutter to the left of the line number. Press F5 to start debugging the application. VS Code will start the server in a new terminal and hit the breakpoint we set. From there you can inspect variables, create watches, and step through your code.
Deploy your application
If you'd like to learn how to deploy your web application, check out the Deploying Applications to Azure tutorials where we show how to run your website in Azure.
Next steps
There is much more to explore with Visual Studio Code, please try the following topics:
The Microsoft Teams developer platform makes it easy for you to extend Teams and integrate your own applications and services seamlessly into the Teams workspace. These apps can then be distributed to your enterprise or for teams around the world.
To extend Microsoft Teams, you need to create a Microsoft Teams app. A Microsoft Teams app is a web application that you host. This app can then be integrated into the user's workspace in Teams.
Prepare your development environment
The first thing you'll need to do is prepare your development environment. You'll need to make sure custom app uploading is enabled for the Office 365 organization you want to build your app in. If you need a dedicated development tenant, you can sign up for the Office 365 developer program. For additional information see Setup your development environment.
Download and host your app
Follow these steps to download and host a simple 'hello world' app in Teams.
Get prerequisites
To complete this tutorial, you need the following tools. If you don't already have them you can install them from these links.
If you see options to add
git , node , npm , and code to the PATH during installation, choose to do so. It will be handy.
You Dont Have Permission To Run App Node Macro
Verify that the tools are available by running the following in a terminal window:
Note
Use the terminal window that you are most comfortable with on your platform. These examples use Bash (which is included in Git), but these scripts will run on most platforms.
You may have a different version of these applications. This should not be a problem, except for gulp. For gulp you'll need to use version 4.0.0 or later.
If you don't have gulp installed (or have the wrong version installed), do so now by running
npm install gulp in your terminal window.
If you have installed Visual Studio Code, you can verify the installation by running:
You can continue to use this terminal window to run the commands that follow in this tutorial.
Download the sample
We have provided a simple Hello, World! sample to get you started. In a terminal window, run the following command to clone the sample repository to your local machine:
Tip
You can fork this repo if you want to modify and check in your changes to your GitHub repo for future reference.
Build and run the sample
Once the repo is cloned, change to the directory that holds the sample:
In order to build the sample, you need to install all its dependencies. Run the following command to do this:
You should see a bunch of dependencies getting installed. Once they are finished, you can run the app:
When the hello-world app starts, it displays
App started listening on port 3333 in the terminal window.
Note
If you see a different port number displayed in the message above, it is because you have a PORT environment variable set. You can continue to use that port orchange your environment variable to 3333.
At this point, you can open a browser window and navigate to the following URLs to verify that all the app URLs are loading:
Host the sample app
Remember that apps in Microsoft Teams are web applications exposing one or more capabilities. For the Teams platform to load your app, your app must be reachable from the internet. To make your app reachable from the internet, you need to host your app.
For local testing you can run the app on your local machine and create a tunnel to it with a web endpoint. ngrok is a free tool that lets you do just that. With ngrok you can get a web address such as
https://d0ac14a5.ngrok.io (this URL is just an example). You can download and installngrok for your environment. Make sure you add it to a location in your PATH .
Once you install it, you can open a new terminal window and run the following command to create a tunnel. The sample uses port 3333, so be sure to specify it here.
Ngrok will listen to requests from the internet and will route them to your app running on port 3333. You can verify by opening your browser and going to
https://d0ac14a5.ngrok.io/hello to load your app's hello page. Please be sure to use the forwarding address displayed by ngrok in your console session instead of this URL.
Note
If you have used a different port in the build and run step above, make sure you use the same port number to setup the ngrok tunnel.
Tip
It is a good idea to run ngrok in a different terminal window to keep it running without interfering with the node app which you might later have to stop, rebuild and rerun. The ngrok session will return useful debugging information in this window.
There is a paid version of ngrok that allows persistent names. If you use the free version your app will only be available during the current session on your development machine. If the machine is shut down or goes to sleep the service will no longer be available. Remember this when sharing the app for testing by other users. If you have to restart the service it will return a new address and you will have to update every place that uses that address.
Remember, make a note of the URL of your app because you will need this later when you register the app with Teams using App studio. Notepad works fine for this purpose.
Deploy your app to Microsoft Teams
At this point you have an app hosted on the internet, but you have no way yet of telling Teams where to look for it, or even what your app is called. To do this you now have to create an app package. This is little more than a text file that contains the app manifest and some icons that the Teams client will use to properly display and brand your app. You can manually create this app package, or you can use App Studio, a tool that runs in Teams that will simplify the process of registering the app. App Studio is the recommended way of creating and updating the app package.
For either method you will need the following:
Use App Studio to update the app package
App Studio is a Teams app that you can install from the Teams store. It simplifies the creation and registration of an app.
To install App Studio in Teams, click on the app store icon at the bottom of the left hand bar, and search for App Studio.
Once you find the tile for App Studio, click on it and choose install in the dialog that pops up.
Once App Studio is installed click on the Manifest editor tab to begin creating the app package for your Teams app.
The sample comes with its own pre-made manifest, and is designed to build an app package when the project is built. On .NET this is done in Visual Studio, and on Node JS this is done by typing
gulp at the command line in the root directory of the project.
The name of the generated app package is helloworldapp.zip. You can search for this file if the location is not clear in the tool you are using.
In the next part of this walkthrough you are going to modify this app package by selecting the Import an existing app tile in the Manifest Editor.
Once the app package has been imported App Studio should look like this:
Click on the tile for your newly imported app, Hello World.
There is a list of steps in the left-hand side of the Manifest editor, and on the right a list of properties that need to be filled in for each of those steps. Since you started with a sample app, much of the information is already filled out. The next steps will walk you through changing the parts that still need to be updated.
App details
Click on the App details entry under Details. Click the Generate button to create a new app id.
Your new app id should look something like:
2322041b-72bf-459d-b107-f4f335bc35bd .
Look through the rest of the App details in the right hand pane, and familiarize yourself with some of the entries such as Developer information and Branding. These sections are important if you are writing a new app for distribution.
Capabilities: Tabs
Tabs are among the simplest elements to add to a Teams app. The sample app already supports several tabs, and you can enable them as follows.
Team tab
Your app can only have one Team tab.
In this sample, the Team tab is where your configuration page goes. Click on the .. symbol at the end of the entry and choose Edit from the drop-down. Change the URL to
https://yourteamsapp.ngrok.io/configure where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.
Personal tabs
Your app can have up to 16 tabs, including the team tab.
Personal tabs are represented differently from the team tab. You should see Hello Tab already listed in the personal tabs list. At the moment it has a placeholder value
com.contoso.helloworld.hellotab . Click on the .. symbol at the end of the entry and choose Edit from the drop-down. The following dialog will appear.
There are two fields that you need to update with your app URL.
Where
yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.
Bots
Bots are the most common way to add functionality to your app. The hello world sample already has a bot as part of the sample, but it has not been registered with Microsoft yet.
The bot that was imported from the sample does not have an App ID associated with it yet. You will have to create a new bot so that App Studio can create a new App ID and register it with Microsoft. Note that this is the App ID for the bot, which is different from the App ID that we created for the app in a earlier step. Each bot in an app requires its own App ID.
Click the delete button next to the Imported bot in the bot list.
Now there are no bots left to show. Click Setup. This will display the Set up a bot dialog.
Add a bot name such as
Contoso bot , and select all three buttons under scope.
Choose Create bot to exit the dialog. App Studio will spend a moment registering your bot with Microsoft, and then should display your new bot in the bot list. Now would be a good time to open a text file in notepad and copy and paste your new bot id into it. You will need this id later.
Click Generate New Password, and make a note of the password in the same text file you noted your Bot app ID in. This is the only time your password will be shown, so be sure to do this now.
Update the Bot endpoint address to
https://yourteamsapp.ngrok.io/api/messages , where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.
Now would be a good time to save your text file if you have not done so already. You will add this information to your hosted app later in this walkthrough, which will allow secure communication with your bot.
Messaging extensions
Messaging extensions let users ask for information from your service and post that information, in the form of cards, right into the channel conversation. Messaging extensions appear along the bottom of the compose box.
Click on Messaging extensions under Capabilities in the left hand column of App Studio to begin configuring the messaging extension.
The sample messaging extension is listed in the right hand pane under Messaging Extensions. Click Delete again to remove this entry, and then click the Set up button following the same steps as you followed for bots. This will display the Messaging Extension dialog.
Select the Use existing bot tab, then Select from one of my existing bots. In the drop-down menu, select the bot you created in the section above. Add a Bot name and click Save to close the dialog.
Under the Command section, click Add. We're adding a search-based command, so choose the Allow users to query your service.. option.
In the New command dialog enter the following values.
Under New command:
Under Parameter:
Once you're entered the information, click Save to close the dialog.
Register your app in Teams
You have now completed entering the details of your app, but two steps remain. First you must use the Test and Distribute section of App Studio to install your app in Teams, and second you must update your hosted application with the App ID and password for your bot. Lufthansa entertainment app mac. Remember that the sample expects to use the same App ID and password for both the bot and the messaging extension.
Click on the Test and distribute item under Finish in the left hand column of App Studio.
In order to upload your app to Teams, click the Install button under Test and Distribute.
Click on the Search box in the Add to a team section and select a team to add the sample app to. Usually you will want to set up a special team for testing.
Click the Install button at the bottom of the dialog.
This finishes the App Studio portion of this walkthrough. You should now see your app running in Teams, however the bot and the messaging extension will not work until you update the hosted applications environment to know what the App IDs and passwords are.
Update your hosted app
The sample app requires the following environment variables to be set to the values you made a note of earlier.
How you do that differs depending on how you hosted your app. The important thing about using environment variables is that these values are part of your environment - they can be accessed by the code for your app, but they are not exposed to third parties who might examine the files that make up your site.
If you are running the app using ngrok you'll need to set up some local environment variables. There are many ways to do this, but the easiest, if you are using Visual Studio Code, is to add a launch configuration:
Where:
MICROSOFT_APP_ID and MICROSOFT_APP_PASSWORD is the ID and password, respectively, for your bot.NODE_DEBUG will show you what's happening in your bot in the Visual Studio Code debug console.NODE_CONFIG_DIR points to the directory at the root of the repository (by default, when the app is run locally, it looks for it in the src folder).
Note
If you have not stopped npm from earlier in the tutorial, you'll need to run
npm stop in order for Visual Studio Code to pickup your launch configuration variables correctly.
Configure the app tab
Once you install the app into a team, you will need to configure it to show content. Go to a channel in the team and click on the '+' button to add a new tab. You can then choose
Hello World from the Add a tab list. You will then be presented with a configuration dialog. This dialog will let you choose which tab to display in this channel. Once you select the tab and click on Save you can see the Hello World tab loaded with the tab you chose.
Test your bot in TeamsYou Dont Have Permission To Run App Node Macos
You can now interact with the bot in Teams. Choose a channel in the team where you registered your app, and type
@your-bot-name , followed by your message. This is called an @mention. Whatever message you send to the bot will be sent back to you as a reply.
Test your messaging extension
To test your messaging extension, you can click on the three dots below the input box in your conversation view. A menu will pop up with the 'Hello World' app in it. When you click it, you will see a number of random texts. You can choose any one of them and it will be inserted it into your conversation.
Ithoughts app for mac. Choose one of the random texts, and you will see a card formatted and ready to send with your own message at the bottom.
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |