azure / static-web-apps-cli Goto Github PK

Prominently display the emulator URL at startup. Currently the ports used by auth server and others are also printed, so we need to make the actual emulator port stand out.

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. Log in
2. Navigate to any function /api/anything

Expected behavior
Request should succeed and the auth header should be set.

Actual
Crashes sometimes. See screenshot

Desktop (please complete the following information):

• OS: macOS
• SWA CLI version 0.1.0

When I try to navigate to the auth emulation page that mocks a user account, the browser stays on the app and never renders the auth mocking UI.

Steps to reproduce

1. Run swa start ./public
2. Navigate to the app in the browser at http://127.0.0.1:4200/ (to verify the local server is working)
3. Navigate to http://127.0.0.1:4200/.auth/login/github to attempt to emulate a login

Expected behavior

The app should display the auth mocking UI.

Environment

• OS: Windows 10 Enterprise
• Browser: Chrome
• Version: 88.0.4324.190 (Official Build) (64-bit)

Logs

$ swa start ./public
INFO: Found SWA configuration file: C:\Users\cshoe\Documents\data\code\sandbox\swa-cli-demo\.github\workflows\azure-static-web-apps-ambitious-sand-004598a1e.yml
>> detected runtime: node.js
[auth] Auth server listening on http://0.0.0.0:4242
[ swa] SWA listening on http://0.0.0.0:4280        
[ app] Starting up http-server, serving C:\Users\cshoe\Documents\data\code\sandbox\swa-cli-demo\public
[ app] Available on:
[ app]   http://192.168.1.2:4200
[ app]   http://100.64.76.144:4200
[ app]   http://127.0.0.1:4200
[ app]   http://172.30.240.1:4200
[ app] Unhandled requests will be served from: http://0.0.0.0:4280/?
[ app] Hit CTRL-C to stop the server
[ app] [2021-02-25T14:44:36.621Z]  "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36"
[ app] (node:19428) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
[ app] [2021-02-25T14:44:37.299Z]  "GET /global.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36"
[ app] [2021-02-25T14:44:37.300Z]  "GET /build/bundle.css" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36"
[ app] [2021-02-25T14:44:38.038Z]  "GET /build/bundle.js" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36"
[ app] [2021-02-25T14:44:38.865Z]  "GET /favicon.png" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.190 Safari/537.36"
[ app] [2021-02-25T14:44:58.896Z]  "GET /.auth/login/github" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, 
like Gecko) Chrome/88.0.4324.190 Safari/537.36"
[ swa] proxy> GET 0.0.0.0:4280/?/.auth/login/github

Describe the bug
App dev server has hot reloading via WebSockets is not working.

To Reproduce

1. Start a React dev server
2. swa start http://localhost:3000/

Expected behavior
Hot reloading should work.

Actual behavior

proxy.js crashes

Some investigation finds that this is caused by an error triggered by a ws:// request, which executes the error handler that appears to be misconfigured.

Desktop (please complete the following information):

• OS: macOS

We should not allow changing the --api-prefix right now because the service doesn't support this.

Allow SWA EMU to use Oryx env vars from https://github.com/microsoft/Oryx/blob/master/doc/configuration.md#oryx-configuration

Is your feature request related to a problem? Please describe.

I have to enter credencial every time when verify auth.

Describe the solution you'd like

I want to mock credencial using a file.

Describe alternatives you've considered

Register multiple credencial at once in the UI. However, this is not the root solution.

Additional context

none

See https://github.com/Azure/static-web-apps-cli/runs/1839979564?check_suite_focus=true#step:5:88

Describe the bug
When starting the CLI, if the current directory has a folder named api, it is assumed that it's a function app and the CLI attempts to start it.

To Reproduce

1. Create a folder named api.
2. swa start http://localhost:3000

Expected behavior
CLI should start without an API.

Actual behavior
CLI attempts to start Azure Functions Core Tools in the api folder.

Desktop (please complete the following information):

• OS: macOS

Currently, you are required to have created a GitHub Actions workflow file before you're able to use the emulator.

This is because the emulator reads a bunch of stuff out of the workflow file, but it can make for a challenging development flow as you have to have deployed the application before you're able to use the emulator.

It'd be useful if there was a way that you could run the emulator without creating the workflow first.

Describe the solution you'd like
As a swa developer, I'd like to use TypeScript to develop swa features.

Describe the bug
Detects .NET and runs build but I don't want it to do that.

To Reproduce
Steps to reproduce the behavior:

1. In a folder that has a .csproj file, start the cli for another folder that contains static assets. For example: swa start static
2. It thinks it's dotnet and runs dotnet run.

Expected behavior
It shouldn't run any kind of build, especially since the folder I'm passing to the CLI isn't even a dotnet app. Even if the folder is a dotnet app, should we automatically do dotnet run or just serve it like static files? I think the expectation is to serve static files. If we want an automatic build, maybe pass a flag.

Currently, the CLI serves the traffic over HTTP. We need to support HTTPS.

• generate a valid SSL certificate for localhost (see scripts/cert.sh)
• use HTTPS for the proxy

Is your feature request related to a problem? Please describe.
For users to locally debug while running the local emulator, we'll need to expose the ports for debugging/inspecting.

Describe the solution you'd like
I think that for node.js, this should just be running the node process with the inspect flag and specify a port. For C#, we'll have to attach to the process via processId.

Additional context
I'm working on the Static Web Apps Extension and a core scenario for users is to run the emulator locally and then debug via VS Code. The emulator has been awesome so far! 🎉

# serve static assets from disk at ./app_artifacts, no api
swa start app_artifacts

# proxy to (ng/react/vue etc) dev server that is already running, no api
swa start http://localhost:4200

# run with api project in ./api
swa start app_artifacts --api api

# run with api project in ./api, but serve api from http://localhost:<port>/functions
swa start app_artifacts --api api --api-prefix functions

# build app with default command (npm run build?) from ./app
# then serve as static assets from build output (./app_artifacts)
swa start app_artifacts --build-app app

# build app with specific command
swa start Client/bin/Debug/net5.0/publish/wwwroot --build-app Client --build-app-command "dotnet publish"

# run with settings in swa.config
swa start 

By default, it can try to search for routes.json or the new config file and use it.

1. Use the file in the app artifacts folder (if supplied)
2. Search recursively from current folder and use the first config file that it finds.

Optionally, allow specifying location of the routes/config file:

swa start http://localhost:5000 --config Client/wwwroot/routes.json

How VS Code might start the emulator:

swa start http://localhost:4200 --api api

We should have a beautiful landing page, similar to https://hexa.run!

The CLI currently spawns multiple servers:

• proxy server
• auth server
• static server

Having multiple servers to manage makes it hard to manage debugging and resources. This also introduces some unexpected behaviors like #96 and #94.

We need to move auth and static servers into proxy as middleware logic. This way we would have only one server to manage: the proxy.

Even if this is an internal change, tagging @craigshoemaker in case we need to update docs once this has been fixed.

When logging in, always add anonymous and authenticated as roles in the cookie. This mirrors how it works in Azure.

Describe the solution you'd like
As a user, I'd like to be able to start swa using a config file. All the CLI flags should be supported.

{
  "options": {
   // CLI flags
  }
}

File name options:

• swa.json
• swa.config.json
• .swarc
• swa property in package.json

On Windows, attempting to close the CLI server using ctrl-c does not stop all running services. Additionally, sometimes a response is very delayed after pressing ctrl-c, and at times there is no response at all.

Steps to reproduce

1. Start a SWA site with the swa start <APP_LOCATION>
2. Type ctrl-c to stop the CLI server
3. Try to start the site again with swa start <APP_LOCATION>
4. See error 👇

Expected behavior

When you close the CLI server using ctrl-c, all services are stopped so you can start it again successfully.

Desktop

• OS: Windows
• Browser: n/a
• Version: n/a

Error

$ swa start ./__sapper__/export

INFO: Found SWA configuration file: C:\Users\cshoe\Documents\data\code\projects\website\.github\workflows\azure-static-web-apps-red-bay-09fca812.yml
>> detected runtime: node.js
[ swa] SWA listening on http://0.0.0.0:4280
[auth] events.js:288
[auth]       throw er; // Unhandled 'error' event
[auth]       ^
[auth]
[auth] Error: listen EADDRINUSE: address already in use 0.0.0.0:4242
[auth]     at Server.setupListenHandle [as _listen2] (net.js:1309:16)
[auth]     at listenInCluster (net.js:1357:12)
[auth]     at doListen (net.js:1496:7)
    at processTicksAndRejections (internal/process/task_queues.js:85:21)
[auth] Emitted 'error' event on Server instance at:
[auth]     at emitErrorNT (net.js:1336:8)
[auth]     at processTicksAndRejections (internal/process/task_queues.js:84:21) {
[auth]   code: 'EADDRINUSE',
[auth]   errno: 'EADDRINUSE',
[auth]   syscall: 'listen',
  address: '0.0.0.0',
  port: 4242
[auth] }
[ swa] events.js:288
      throw er; // Unhandled 'error' event
[ swa]       ^
[ swa]
[ swa] Error: listen EADDRINUSE: address already in use 0.0.0.0:4280
[ swa]     at Server.setupListenHandle [as _listen2] (net.js:1309:16)
    at listenInCluster (net.js:1357:12)
[ swa]     at doListen (net.js:1496:7)
[ swa]     at processTicksAndRejections (internal/process/task_queues.js:85:21)
Emitted 'error' event on Server instance at:
[ swa]     at emitErrorNT (net.js:1336:8)
[ swa]     at processTicksAndRejections (internal/process/task_queues.js:84:21) {
[ swa]   code: 'EADDRINUSE',
  errno: 'EADDRINUSE',
  syscall: 'listen',
[ swa]   address: '0.0.0.0',
[ swa]   port: 4280
[ swa] }
[ swa] node ../proxy/server.js exited with code 1
[ swa] node ../proxy/server.js restarted
[auth] node ../auth/server.js --host=0.0.0.0 --port=4242 exited with code 1
[auth] node ../auth/server.js --host=0.0.0.0 --port=4242 restarted
[ app] Starting up http-server, serving C:\Users\cshoe\Documents\data\code\projects\website\__sapper__\export
[ app] Available on:
[ app]   http://192.168.1.2:4200
[ app]   http://100.64.76.144:4200
[ app]   http://127.0.0.1:4200
[ app]   http://172.22.16.1:4200
[ app] Unhandled requests will be served from: http://0.0.0.0:4280/?
[ app] Hit CTRL-C to stop the server
[auth] events.js:288
      throw er; // Unhandled 'error' event
[auth]       ^
[auth]
[auth] Error: listen EADDRINUSE: address already in use 0.0.0.0:4242
[auth]     at Server.setupListenHandle [as _listen2] (net.js:1309:16)
    at listenInCluster (net.js:1357:12)
    at doListen (net.js:1496:7)
    at processTicksAndRejections (internal/process/task_queues.js:85:21)
[auth] Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1336:8)
[auth]     at processTicksAndRejections (internal/process/task_queues.js:84:21) {
[auth]   code: 'EADDRINUSE',
[auth]   errno: 'EADDRINUSE',
  syscall: 'listen',
  address: '0.0.0.0',
[auth]   port: 4242
[auth] }
[ swa] SWA listening on http://0.0.0.0:4280
[ swa] events.js:288
      throw er; // Unhandled 'error' event
[ swa]       ^
[ swa]
[ swa] Error: listen EADDRINUSE: address already in use 0.0.0.0:4280
[ swa]     at Server.setupListenHandle [as _listen2] (net.js:1309:16)
    at listenInCluster (net.js:1357:12)
[ swa]     at doListen (net.js:1496:7)
    at processTicksAndRejections (internal/process/task_queues.js:85:21)
[ swa] Emitted 'error' event on Server instance at:
[ swa]     at emitErrorNT (net.js:1336:8)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
[ swa]   code: 'EADDRINUSE',
[ swa]   errno: 'EADDRINUSE',
[ swa]   syscall: 'listen',
[ swa]   address: '0.0.0.0',
  port: 4280
[ swa] }
[auth] node ../auth/server.js --host=0.0.0.0 --port=4242 exited with code 1
[ swa] node ../proxy/server.js exited with code 1

Describe the solution you'd like

Instead of directly integrating with all supported providers, use a simulated login page that allows a user to specify the provider, user info, and roles that they want to log in as.

When the app navigates to /.auth/<provider>/login, display the following screen:

(the anonymous and authenticated roles are always included when authenticated)

Upon "login", store the provided information in a cookie. When an API endpoint is accessed, add a x-ms-client-principal header using the identity from this cookie.

Accessing /.auth/me returns the info from this cookie.

/.auth/logout clears this cookie.

Read docs

Related #6

Current package is published under @manekikko/swa-emu.

We'd like to move it under @azure/static-web-apps-cli.

If user already has a dev server running on port, eg., 4200, when starting the cli:

swa start dist/angular-web-bluetooth-starter

http-server will silently bind to existing dev server, hence serving the wrong content.

Describe the bug
When starting the CLI, it can't find concurrently.

To Reproduce

1. Start react app cd frontend && npm start
2. swa start http://localhost:3000

Expected behavior
CLI should start.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Edge

Describe the bug

Unable to use with the MSLearn sample.

To Reproduce
Steps to reproduce the behavior:

git clone https://github.com/MicrosoftDocs/mslearn-staticwebapp-api.git
cd mslearn-staticwebapp-api/
cd react-app/
npm i
npm run build
cd ..

Can't find the API:

swa --app-location react-app/build --api-location api-starter --api-prefix api
WARNING: SWA configuration not found.
>> detected runtime: unknown
[auth] Auth server listening on http://127.0.0.1:4242
[ api] No API found. Skipping.
[ app] Starting up http-server, serving /Users/antchu/source/temp/mslearn-staticwebapp-api/
[ app] Available on:
[ app]   http://127.0.0.1:4200
[ app]   http://192.168.187.204:4200
[ app]   http://192.168.187.218:4200
[ app] Unhandled requests will be served from: http://0.0.0.0:80/?
[ app] Hit CTRL-C to stop the server
[ api] ([ -d '/Users/antchu/source/temp/mslearn-staticwebapp-api/api' ] && (cd /Users/antchu/source/temp/mslearn-staticwebapp-api/api; func start --cors *)) || echo 'No API found. Skipping.' exited with code 0
[ swa] >> SWA listening on 0.0.0.0:80

Desktop (please complete the following information):

• OS: macOS

Is your feature request related to a problem? Please describe.
The current Auth flow implementation requires azure-functions-core-tools. We would like to remove this dependency.

Describe the solution you'd like
We would like to rewrite the current Auth flow and expose the API as raw Node.js HTTP server.

Let's say I want to run the APP and/or API myself (maybe they run a compiler like TypeScript), I would run the emulator like so:

$> swa --app-uri=http://localhost:3000 --api-uri=http://localhost:7071

But when it starts up, it'll attempt to run its own proxies for those, and in particular the API will fail as the port is already in use.

Since there's no need for these proxies to be run by the emulator, it should skip trying to start them if you provide the uri.

When a user is logged in, all http requests to functions should contain the x-ms-claims-principal header.

Initial work is done here: https://github.com/Azure/static-web-apps-cli/blob/main/src/proxy.ts#L142

TODO

• rename npm package to @azure/static-web-apps-cli
• update the readme and rename SWA EMU to Static Web Apps CLI or SWA CLI.
• change license authors
• change authors in package.json
• delete AFFILIATION_NOTICE.md
• update CODE_OF_CONDUCT.md
• replace all https://github.com/manekinekko/swa-emulator/ references with the new repo url
• add repo files requires by Microsoft OSPO (SECURITY.md, ...)
• rename repo to static-web-apps-cli (Blocked by #1)
• update the release-it config (Blocked by #51)

CC @anthonychu please add any other items to this checklist.

Describe the bug
If passing a URI of a running dev server or Functions Core Tools, the incorrect ports are used.

To Reproduce

1. Start a react app
2. swa start http://localhost:3000
3. Open http://localhost:4200

Expected behavior
App works in browser

Actual behavior
CLI tries to forward to port 4200 instead of 3000

Desktop (please complete the following information):

• OS: macOS

As an alternative to http-server, we could evaluate lite-server and see if we can easily use it instead of http-server.

By default, the emulator will serve api and app from the local folder.

This feature will allow developers to skip serving app and api from the local folder, and serve them from existing endpoints (useful if you are working on a dev version of either app or api).

• serve from existing app (2b8b4f8)
• serve from existing api

Describe the bug
when running swa --build --verbose. the output from the npm install command does not show up.

To Reproduce
Steps to reproduce the behavior:

1. Go to your swa project
2. run swa --build --verbose
3. The emulator will start but there is no logs during the npm install. The logs will show up after npm finishes installing all the deps.

Expected behavior
when using --verbose, we should see the logs from the npm install command

Description of bug

When the auth pipeline hits /.auth/complete the emulator responds with a 302 that sets the location header the emulator host.

Expected outcome

It should return a 200 response with a HTML chunk that does an auth redirect to the path provided in post_login_redirect_uri on the /.auth/login/<provider> query string.

Here's a sample HTML response:

<html><head><title>Working...</title></head><body><form method="GET" name="hiddenform" action="https://purple-plant-04c92a01e.azurestaticapps.net/authentication/login-callback/e71e4fa3-6298-4c01-ab1d-882ab0758110"><noscript><p>Script is disabled. Click Submit to continue.</p><input type = "submit" value = "Submit" /></noscript></form><script language = "javascript">document.forms[0].submit();</script></body></html>

Describe the solution you'd like
As a user I'd like to be able to use swa to scaffold a new project structure.

Example: running swa init should produce the following project structure:

├── api
│   └── <azure functions project>
├── app
│   └── <front-end project>
└── swa.json

Other options/questions:

• add an interactive mode (like in https://hexa.run)?
• only scaffold the api folder?

Is your feature request related to a problem? Please describe.
Currently, running swa inside a monorepo project such as shopathome (by @johnpapa) , will give unexpected behaviors.

Describe the solution you'd like
The emulator needs to support:

• monorepo projects
• multiple workflow GitHub files (one per sub-project)

As a developer, I'd like to be able to start the emulator and serve the frontend content from a folder.
Example: swa ./app-artifact-location

I've installed the emulator as a local devDependency, but I also have concurrently as a local devDependency. Doing this results in the emulator failing to start as it's unable to find the concurrently executable.

It'd probably be better to have concurrently as a peerDependency and use npx to run it, rather than directly using it.

Describe the bug
When stopping the emulator, the proxy server process doesn't get stopped, and keeps running. As a consequence, when restarting the emulator again, we can't bind to port 80.

To Reproduce
Steps to reproduce the behavior:

1. Start the emulator using the swa --ui command.
2. Kill the emulator using ctrl-c
3. Restart the emulator by running the swa command
4. See error: Error: listen EADDRINUSE: address already in use 0.0.0.0:80

Expected behavior
When stopping the emulat, all servers should stop!

Describe the bug
When running the emulator in the WSL, an EACCESS error is thrown saying that permissions is denied on port 80. Inspection of the port with lsof will show that the port is free.

To Reproduce
Steps to reproduce the behavior:

1. Open a terminal instance in WSL on a SWA project
2. Run swa

Expected behavior
The emulator starts and is running on 0.0.0.0:80

Desktop (please complete the following information):

• OS: Windows 10 v 19042.746
• Version 0.0.1-alpha.7

The --ui option which shows a dashboard in the terminal, was added as an experiment. We need to remove it.

Checkout docs for more details.

Describe the bug
When there's no workflow file in the repo, the CLI prints a warning.

INFO: Azure Static Web Apps configuration not found under ".github/workflows/"

This might mislead the user to believe that a workflow is required. Suggest removing the message. Instead, show a message that config was loaded from the workflow (it's already doing this).

Describe the bug
Whenever I run swa start .\frontend\build --api .\api from the root of this repo https://github.com/microsoft/vscode-azureappservice/issues, it echoes No API found. Skipping. I've confirmed that this works on MacOS and I have Func Core CLI tools v3.0.3284 installed

To Reproduce
Steps to reproduce the behavior:

1. Clone and npm install/npm build project https://github.com/microsoft/vscode-azureappservice/issues
2. From root, run command swa start .\frontend\build --api .\api
3. API not found error

Expected behavior
For the API folder to be recognized and start running the func core tools

Desktop (please complete the following information):

• OS: Windows 10 Pro

Is your feature request related to a problem? Please describe.
When the swa cli tries to star the api project using the func cli (Azure Functions Core Tools). If func is not available, this would trigger an error, an the api won't be emulated.

Describe the solution you'd like
Check if the func cli is already installed. If not, show a warning message or abort the whole process.

Additional context
This should work across all supported platforms.

cc @anthonychu

The current CLI ergonomics are:

swa start ./dist-folder-or-server --api=./api-or-server

We don't anymore need --use-app and --use-api.