feat(vscode): Introduce support for Static Web Apps #5099

alain-zhiyanov · 2024-07-10T17:13:15Z

This adds support so users can create Static Web Apps alongside their Logic Apps when creating through 'Create New Logic App Workspace' command. I've changed how the user is prompted by the wizard, how files are created, and I've added calls to deploy the user's logic app after initialization and then call the Static Web Apps extension.

Some features of the original extension are not compatible at the moment.

…mmand in tasks wont work

…view, now call static web app create after deployment in LA extension

alain-zhiyanov · 2024-07-16T21:13:55Z

@microsoft-github-policy-service agree [company="Microsoft"]

alain-zhiyanov · 2024-07-16T21:14:19Z

@microsoft-github-policy-service agree

alain-zhiyanov · 2024-07-16T21:43:39Z

@swghimire @ccastrotrejo

ccastrotrejo · 2024-07-16T23:39:05Z

Updated the base branch to the feature branch dev/StaticWebApps as we try to keep everything on main branch ready to ship to prod @alain-zhiyanov

ccastrotrejo · 2024-07-17T18:06:33Z

.vscode/launch.json

NIT: I think there is no need for an extra breakline here

…ov/LogicAppsUX into using-swa-extension

alain-zhiyanov · 2024-07-23T21:15:03Z

Localize/lang/strings.json

automatically changed. let me know if I should revert

Yes, please revert it

annikel · 2024-07-24T13:52:28Z

Localize/lang/strings.json

@@ -234,7 +234,6 @@
 "7ZR1xr": "Add an action",
 "7aJqIH": "Optional. The locale to be used when formatting (defaults to 'en-us').",
 "7gUE8h": "This will revert your workflow to the state it was in before Copilot's edit. If you made additional edits to the workflow after Copilot's, you will lose them. This action cannot be undone. Do you want to continue?",
- "7jAQar": "Enter value for parameter.",


annikel · 2024-07-24T13:53:09Z

apps/vs-code-designer/src/app/commands/GenerateStaticWebApp/generateStaticWebApp.ts

+export async function generateStaticWebApp(context: IAzureConnectorsContext, node: vscode.Uri): Promise<void> {
+ console.log('generate SWA');
+ //removing "/c: because that doesn't fit SWA cli format"
+ const command: string = `node C:\\Users\\t-azhiyanov\\static-web-apps-cli-sifat\\dist\\cli\\bin.js generate ${node.path.substring(3)}`;


how can this be a static path? Won't it fail to find the bits on another machine?

@alain-zhiyanov I am not fully aware of the implementation or how we get this script, however if this is a static script, please upload the script in the repo or even better just make a function to call it. If its not static (generated), please make sure to have it a kind of static place for all users to work and also use path.join() since the pat diff for windows (\) is different than the one for linux (/)

annikel · 2024-07-24T13:53:23Z

apps/vs-code-designer/src/app/commands/GenerateStaticWebApp/generateStaticWebApp.ts

+
+export async function generateStaticWebApp(context: IAzureConnectorsContext, node: vscode.Uri): Promise<void> {
+ console.log('generate SWA');
+ //removing "/c: because that doesn't fit SWA cli format"


Is this comment still needed?

annikel · 2024-07-24T13:53:36Z

apps/vs-code-designer/src/app/commands/GenerateStaticWebApp/generateStaticWebApp.ts

+import { ext } from '../../../extensionVariables';
+
+export async function generateStaticWebApp(context: IAzureConnectorsContext, node: vscode.Uri): Promise<void> {
+ console.log('generate SWA');


Since this is user facing can we make this more descriptive?

@alain-zhiyanov Overall I would say to remove all console logs. If you want actually display something for the user to be aware of it, please the output channel and please localize the text. For example:
ext.outputChannel.appendLog(localize('excludedSettings', 'Excluded the following settings:'));

annikel · 2024-07-24T13:54:07Z

apps/vs-code-designer/src/app/commands/createCodeless/createCodeless.ts

- if (!projectPath) {
- return;
- }
+ //project path changed to account for SWA. need to add flag depending on if SWA initialized TODO


Is this backwards compatible yet? And why this the code commented

annikel · 2024-07-24T13:54:56Z

...e-designer/src/app/commands/createCodeless/createCodelessSteps/CodelessWorkflowCreateStep.ts

@@ -45,19 +46,68 @@ export class CodelessWorkflowCreateStep extends WorkflowCreateStepBase<IFunction
 }

 public async executeCore(context: IFunctionWizardContext): Promise<string> {
+ // Check if the user chose to initialize a static web app
+ if (context.initializeStaticWebApp) {


Is the comment needed here?

shouldInitializeStaticWebApp

annikel · 2024-07-24T13:55:32Z

...e-designer/src/app/commands/createCodeless/createCodelessSteps/CodelessWorkflowCreateStep.ts

+ let emptyStatefulDefinition: StandardApp;
+ if (context.initializeStaticWebApp) {
+ //initiate basic logic app which can be called from SWA
+ emptyStatefulDefinition = {


should we read this from a file instead?

we have a file to store the templates apps/vs-code-designer/src/app/utils/codeless/templates.ts

annikel · 2024-07-24T13:55:51Z

apps/vs-code-designer/src/app/commands/createNewCodeProject/CodeProjectBase/setLogicAppType.ts

 ];

 const placeHolder = localize('logicAppProjectTemplatePlaceHolder', 'Select a project template for your logic app workspace');
- context.isCustomCodeLogicApp = (await context.ui.showQuickPick(picks, { placeHolder })).data;
+ const selectedPick = await context.ui.showQuickPick(picks, { placeHolder });
+


nit: remove extra line

annikel · 2024-07-24T13:56:25Z

...ode-designer/src/app/commands/createNewProject/createProjectSteps/ScriptProjectCreateStep.ts

 if (await confirmOverwriteFile(context, localSettingsJsonPath)) {
 const localSettingsJson: ILocalSettingsJson = {
 IsEncrypted: false,
 Values: {
 AzureWebJobsStorage: '',
 APP_KIND: logicAppKind,
+ 'AzureFunctionsJobHost__extensions__workflow__Settings__Runtime.Triggers.AnonymousAuthEnabledForDevEnvironment': 'true',


nit: the formatting here is off

Also make sure to just add it when is needed for static web apps and not for all of the scenarios

annikel · 2024-07-24T13:56:45Z

...ode-designer/src/app/commands/createNewProject/createProjectSteps/ScriptProjectCreateStep.ts

@@ -43,12 +43,14 @@ export class ScriptProjectCreateStep extends ProjectCreateStepBase {
 }

 const localSettingsJsonPath: string = path.join(context.projectPath, localSettingsFileName);
+ //added new setting here to allow local start without SAS


Are we always adding this setting now or only if is starting through swa cli?

annikel · 2024-07-24T13:57:05Z

apps/vs-code-designer/src/app/commands/deploy/deploy.ts

 await node.loadAllChildren(context);
+
+ //need to add flag for this call depending on if SWA initialized and remove region hardcode TODO


Can we properly tag all todos and also add them to the doc

annikel · 2024-07-24T13:57:24Z

apps/vs-code-designer/src/app/commands/deploy/deploy.ts

+ const logicAppBackendResourceId = siteConfig.id.substring(0, siteConfig.id.length - suffix.length);
+ vscodeExtension.commands.executeCommand('staticWebApps.createStaticWebApp', undefined, undefined, {
+ backendResourceId: logicAppBackendResourceId,
+ region: 'eastus',


How can this region be static?

annikel · 2024-07-24T13:57:32Z

apps/vs-code-designer/src/app/commands/initProjectForVSCode/InitVSCodeStepBase.ts

 ILaunchJson,
 IExtensionsJson,
 } from '@microsoft/vscode-extension-logic-apps';
 import { WorkflowProjectType, FuncVersion } from '@microsoft/vscode-extension-logic-apps';
 import * as fse from 'fs-extra';
 import * as path from 'path';
-import type { TaskDefinition, DebugConfiguration, WorkspaceFolder } from 'vscode';
+import { type TaskDefinition, type DebugConfiguration, type WorkspaceFolder, Uri } from 'vscode';


nit: revert?

annikel · 2024-07-24T13:57:51Z

apps/vs-code-designer/src/app/commands/initProjectForVSCode/InitVSCodeStepBase.ts

@@ -81,6 +77,9 @@ export abstract class InitVSCodeStepBase extends AzureWizardExecuteStep<IProject

 context.telemetry.properties.isProjectInSubDir = String(isSubpath(context.workspacePath, context.projectPath));

+ //creating all .vscode files in the root of the workspace


Can we work on adding the flags here?

annikel · 2024-07-24T13:58:06Z

apps/vs-code-designer/src/app/commands/initProjectForVSCode/InitVSCodeStepBase.ts

@@ -114,53 +113,56 @@ export abstract class InitVSCodeStepBase extends AzureWizardExecuteStep<IProject
 }

 private async writeTasksJson(context: IProjectWizardContext, vscodePath: string): Promise<void> {
- const newTasks: TaskDefinition[] = this.getTasks();
+ //writing custom Task json which will start LA and SWA. not following how tasks are originally added; should be fixed TODO


Does this still have to be fixed?

annikel · 2024-07-24T13:58:19Z

apps/vs-code-designer/src/app/commands/initProjectForVSCode/InitVSCodeStepBase.ts

- const versionMismatchError: Error = new Error(
- localize('versionMismatchError', 'The version in your {0} must be "{1}" to work with Azure Functions.', tasksFileName, tasksVersion)
- );
+ const tasksJsonContent = `{


can we read this from a file?

annikel · 2024-07-24T13:58:34Z

apps/vs-code-designer/src/app/utils/codeless/connection.ts

@@ -71,8 +69,12 @@ export async function addConnectionData(
 }

 export async function getLogicAppProjectRoot(context: IActionContext, workflowFilePath: string): Promise<string> {
- const workspaceFolder = nonNullValue(getContainingWorkspace(workflowFilePath), 'workspaceFolder');
- const workspacePath: string = workspaceFolder.uri.fsPath;
+ //need to add flag for how workspace found depending on if SWA initialized TODO


Can we work on adding this flag

ccastrotrejo · 2024-07-24T17:43:29Z

apps/vs-code-designer/src/app/commands/createCodeless/createCodeless.ts

+ // return;
+ // }
+
+ const projectPath = path.join(searchDirectory(workspacePath, 'Stateful1'), '..');


is stateful1 always going to be the name of the workflow?

ccastrotrejo · 2024-07-24T17:44:33Z

...e-designer/src/app/commands/createCodeless/createCodelessSteps/CodelessWorkflowCreateStep.ts

+ // Check if the user chose to initialize a static web app
+ if (context.initializeStaticWebApp) {
+ context.telemetry.properties.initializeStaticWebApp = 'true';
+ vscodeExtension.commands.executeCommand('azureLogicAppsStandard.deploy');


NIT: Here is just better to call the function if possible, rather than calling the command

ccastrotrejo · 2024-07-24T17:46:14Z

...e-designer/src/app/commands/createCodeless/createCodelessSteps/CodelessWorkflowCreateStep.ts

+ let emptyStatefulDefinition: StandardApp;
+ if (context.initializeStaticWebApp) {
+ //initiate basic logic app which can be called from SWA
+ emptyStatefulDefinition = {


we have a file to store the templates apps/vs-code-designer/src/app/utils/codeless/templates.ts

ccastrotrejo · 2024-07-24T17:49:04Z

apps/vs-code-designer/src/app/utils/funcCoreTools/funcHostTask.ts

 * @param {vscode.Task} task - Function task.
- * @returns {number} Returns true if the task is a func host start task, otherwise returns false.
+ * @returns {boolean} Returns true if the task is an SWA start task, otherwise returns false.
 */
 export function isFuncHostTask(task: vscode.Task): boolean {


For this I would suggest creating a different function rather than just patching this one.

ccastrotrejo · 2024-07-24T17:50:29Z

apps/vs-code-designer/src/app/commands/initProjectForVSCode/InitVSCodeStepBase.ts

@@ -114,53 +113,56 @@ export abstract class InitVSCodeStepBase extends AzureWizardExecuteStep<IProject
 }

 private async writeTasksJson(context: IProjectWizardContext, vscodePath: string): Promise<void> {


Same thing as for the func host start function. It would be great to have a different function

ccastrotrejo · 2024-07-24T17:51:36Z

...ode-designer/src/app/commands/createNewProject/createProjectSteps/ScriptProjectCreateStep.ts

 if (await confirmOverwriteFile(context, localSettingsJsonPath)) {
 const localSettingsJson: ILocalSettingsJson = {
 IsEncrypted: false,
 Values: {
 AzureWebJobsStorage: '',
 APP_KIND: logicAppKind,
+ 'AzureFunctionsJobHost__extensions__workflow__Settings__Runtime.Triggers.AnonymousAuthEnabledForDevEnvironment': 'true',


Also make sure to just add it when is needed for static web apps and not for all of the scenarios

alain-zhiyanov added 12 commits May 29, 2024 14:20

added log when project started

7a62e67

add wizard option to init swa and add log to reg each decision

00b4539

add all LA folders in to their own LA dir and then call SWA

a0a7c77

added start swa from new LA workspace menu. note current SWA start co…

b69cb09

…mmand in tasks wont work

changed task json so it sets swa start dynamically

b87bd94

added basic workflow and can now view SWA with SAS when designer opened

6053a4a

changed default stateful workflow and altered tasks.json

2122ec6

added comments and fixed workflows

71f0017

fixed deployment

79b814e

added new command to call swa generate, removed SWA URL popup in over…

697eaf8

…view, now call static web app create after deployment in LA extension

Update CodelessWorkflowCreateStep.ts comments

8f820e3

removed inspect flag from launch.json

c6c2e2b

alain-zhiyanov changed the title ~~[DO NOT REVIEW] Adding support for Static Web Apps~~ Adding support for Static Web Apps Jul 16, 2024

alain-zhiyanov marked this pull request as ready for review July 16, 2024 21:15

ccastrotrejo changed the base branch from main to dev/StaticWebApps July 16, 2024 23:38

ccastrotrejo changed the title ~~Adding support for Static Web Apps~~ feat(vscode): Introduce support for Static Web Apps Jul 16, 2024

ccastrotrejo reviewed Jul 17, 2024

View reviewed changes

.vscode/launch.json Outdated

Copy link

Contributor

ccastrotrejo Jul 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NIT: I think there is no need for an extra breakline here

alain-zhiyanov added 4 commits July 17, 2024 16:35

fixed create workflow command and altered default workflow

830669f

Merge branch 'using-swa-extension' of https://github.com/alain-zhiyan…

2723503

…ov/LogicAppsUX into using-swa-extension

comments and style

a1ca497

Update launch.json

2a3af12

alain-zhiyanov commented Jul 23, 2024

View reviewed changes

annikel reviewed Jul 24, 2024

View reviewed changes

ccastrotrejo requested changes Jul 24, 2024

View reviewed changes

Update generateStaticWebApp.ts

7176a58

		await node.loadAllChildren(context);

		//need to add flag for this call depending on if SWA initialized and remove region hardcode TODO

		@@ -81,6 +77,9 @@ export abstract class InitVSCodeStepBase extends AzureWizardExecuteStep<IProject

		context.telemetry.properties.isProjectInSubDir = String(isSubpath(context.workspacePath, context.projectPath));

		//creating all .vscode files in the root of the workspace

		@@ -114,53 +113,56 @@ export abstract class InitVSCodeStepBase extends AzureWizardExecuteStep<IProject
		}

		private async writeTasksJson(context: IProjectWizardContext, vscodePath: string): Promise<void> {

feat(vscode): Introduce support for Static Web Apps #5099

Are you sure you want to change the base?

feat(vscode): Introduce support for Static Web Apps #5099

Conversation

alain-zhiyanov commented Jul 10, 2024 • edited Loading

alain-zhiyanov commented Jul 16, 2024

alain-zhiyanov commented Jul 16, 2024

alain-zhiyanov commented Jul 16, 2024

ccastrotrejo commented Jul 16, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

annikel Jul 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alain-zhiyanov commented Jul 10, 2024 •

edited

Loading

ccastrotrejo commented Jul 16, 2024 •

edited

Loading

annikel Jul 24, 2024 •

edited

Loading