Giter VIP home page Giter VIP logo

microsoft / webtemplatestudio Goto Github PK

View Code? Open in Web Editor NEW
2.0K 56.0 206.0 282.03 MB

Microsoft Web Template Studio quickly builds web applications using a wizard-based UI to turn your needs into a foundation of best patterns and practices

Home Page: https://aka.ms/webtsinstall

License: MIT License

HTML 1.11% JavaScript 7.77% CSS 6.65% TypeScript 74.47% Vue 1.54% Python 1.57% PowerShell 2.34% Shell 0.55% C# 2.78% Starlark 0.06% Java 0.63% Ruby 0.08% Objective-C 0.45%
vscode-extension

webtemplatestudio's Introduction

Microsoft Web Template Studio

Platforms Supported: MacOSX, Linux, Windows Project Status: Active – The project has reached a stable, usable state and is being actively developed. License: We are using the MIT License We are welcoming PRS!

Microsoft Web Template Studio (aka WebTS) is a Visual Studio Code Extension that accelerates the creation of a new Web or React Native application using a wizard-based experience.

WebTS enables developers to generate boilerplate code for a Web or React Native application by choosing between different project types, frontend and backend frameworks, pages and cloud services. The resulting app is well-formed, readable code. The web application incorporates cloud services on Azure while implementing proven patterns and best practices. Sprinkled throughout the generated code we have links to Docs to provide useful insights. WebTS was created using TypeScript and React. Different combinations of generated code are merged together by Core Template Studio, which was made using .NET Core.

Build Status

Branch Build Status
dev Build Status
release Build Status

Documentation

Detailed Web Template Studio (WebTS) documentation is here.

SHA256

Visual Studio Code extensions are currently not signed. WebTS provides the Secure Hash Algorithm (SHA) of each version we publish. You can find the current extensions sha256 value in the following files:

To verify the integrity of the package, download the vsix from the Marketplace, calculate the hash of the package using the powershell command Get-FileHash or any other tool that allows you to calculate the packages hash, and compare both.

Instructions To Use

Create a new project

  • Open VSCode
  • Press Ctrl + Shift ⇧ + P in Windows/Linux or Command ⌘ + Shift ⇧ + P in Mac to open VSCode's extension launcher
  • Type/Select Web Template Studio: Create Web App for a full-stack web application or Web Template Studio: Create React Native App for a React Native one, and press Enter to launch the extension

Note: React Native is still in Preview and we appreciate any feedback on GitHub.

Deploy the generated project

  • Open VSCode
  • Open the generated project
  • Press Ctrl + Shift ⇧ + P in Windows/Linux or Command ⌘ + Shift ⇧ + P in Mac to open VSCode's extension launcher
  • Type/Select Web Template Studio: Deploy Web App and press Enter to begin the deployment Note: Just available for web applications.

Example Scenario

1. Scenario 1

I need a full-stack web app that is deployed on Azure App Service Web App.

App with Azure Services

2. Scenario 2

I want to create a react native app that works for Android, iOS and Windows. I want my App to have a master-detail and a settings page, that allows the users to switch the App's theme.

App with Azure Services

Features

Web Template Studio approaches full-stack web app creation using the following three attribute sets:

  • Frameworks: First, which frameworks do you want to use for your frontend and backend? We currently support three frameworks for frontend: React, Angular, Vue.js and four frameworks for backend: Node, Flask, Moleculer and ASP.NET Core. We also provide a dependency checker to make sure you have the required version of Node, Python and/or .NET Core installed.
  • App pages: Next, to accelerate app creation, we provide a number of app page templates that you can use to add common UI pages into your new app. The current page templates include: blank page, common layouts (*e.g., master detail) and pages that implement common patterns (*e.g., grid, list). Using the wizard, add as many of the pages as you need, providing a name for each one, and we'll generate them for you.
  • Cloud Services: Lastly, you specify which Azure cloud services you want to use, and we'll build out the framework for the services into your app. Currently supported services cover storage (Azure Cosmos DB), and hosting (Azure App Service).

Once you make the selections you want and click generate, you can quickly extend the generated code.

Known Issues

React Native Applications

1. Generated App has some lint errors.

As a workaround you just need to run yarn lint --fix. There´s already an issue to fix this.

2. React Native Windows.

  • Update to 0.64: Bottom tab navigation doesn´t change text colour when selected. There´s an issue in React Native Windows to fix this in version 0.65.
  • Bundle targets fail when path contains spaces. There´s an issue in React Native Windows to fix this in version 0.65.

Feedback, Requests and Roadmap

Please use GitHub issues for feedback, questions or comments.

If you have specific feature requests or would like to vote on what others are recommending, please go to the GitHub issues section as well. We would love to see what you are thinking.

We are still early in development and are looking for feedback for the roadmap. We're still working on polishing our Web Templates and in our latest version we've also added an initial version of React Native templates.

Contributing

Do you want to contribute? We would love to have you help out. Here are our contribution guidelines.

Reporting Security Issues

Security issues and bugs should be reported privately, via email, to the Microsoft Security Response Center (MSRC) at [email protected]. You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Further information, including the MSRC PGP key, can be found in the Security TechCenter.

License

This code is distributed under the terms and conditions of the MIT license.

Privacy Statement

The extension does log basic telemetry for what is being selected. We are in the process of creating a Telemetry Data page to summarize usage trends. Please read the Microsoft privacy statement for more information.

Frameworks in Generated Code Not Created by Our Team

Acknowledgments

Microsoft Web Template Studio was initially created by Microsoft Garage interns. We hope many more continue with the project.

webtemplatestudio's People

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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

webtemplatestudio's Issues

Make directory for templates

We need a directory for templates because its path is going to be sent to the CoreTemplateStudio API from the extension as a parameter

WCAG 1.3.1,WCAG 3.3.2: Form elements must have labels (#react-select-5-input)

Issue: Form elements must have labels (label)

Target application: Project Acorn
All sidebar inputs need this
Element path: #react-select-5-input

Snippet:

<input id="react-select-5-input" readonly="" tabindex="0" class="css-14uuagi" value="">

How to fix:

Fix any of the following:
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Form element does not have an implicit (wrapped) <label>
  Form element does not have an explicit <label>
  Element has no title attribute or the title attribute is empty

Environment:
Chrome version 72.0.3626.121

====

This accessibility issue was found using Accessibility Insights for Web 2.0.4 (axe-core 3.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Clean up handling for the extension to the API

  • Change createSignalR.. method to establishSignalR..
  • Call postConnectionHandler in the establishSignalR... method rather than the current method
  • Clean up sync api.
  • Figure out a better way to do retries or consider sending a message to the extension to initiate connection.
    Use https No longer being considered since always local host and would create bad UX since the user would have to trust the cert manually.

WCAG 1.3.1,WCAG 4.1.1,WCAG 4.1.2: ARIA roles used must conform to valid values (.styles_details__3DvFP[role="Button"])

Issue: ARIA roles used must conform to valid values (aria-roles)
Details button
Target application: Project Acorn

Element path: .styles_subscriptionCardContainer__32zVX:nth-child(1) > .styles_loginContainer__2_W3f > .styles_selectionContainer__2T7Sk > .styles_details__3DvFP[role="Button"]

Snippet:

<div class="styles_details__3DvFP" role="Button">Details</div>

How to fix:

Fix all of the following:
  Role must be one of the valid ARIA roles
  The role used is not widely supported in assistive technologies

Environment:
Chrome version 72.0.3626.121

====

This accessibility issue was found using Accessibility Insights for Web 2.0.4 (axe-core 3.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Floating Nav Bar in UI

To replicate, bring up console on bottom half of screen, when project details list is long enough it will persist vertical resolution/length. Resizing the console upwards, and then back downwards persists the nav bar.
Chrome:

image

VSCode:
image

WCAG 1.1.1: Images must have alternate text (.styles_icon__lZfWw)

Issue: Images must have alternate text (image-alt)

Target application: Project Acorn
All Icons do this
Element path: .styles_icon__lZfWw

Snippet:

<img src="./static/media/fullstackwhite.4a51bb13.svg" class="styles_icon__lZfWw">

How to fix:

Fix any of the following:
  Element does not have an alt attribute
  aria-label attribute does not exist or is empty
  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  Element has no title attribute or the title attribute is empty
  Element's default semantics were not overridden with role="presentation"
  Element's default semantics were not overridden with role="none"

Environment:
Chrome version 72.0.3626.121

====

This accessibility issue was found using Accessibility Insights for Web 2.0.4 (axe-core 3.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

WCAG 4.1.1: id attribute value must be unique (svg)

Issue: id attribute value must be unique (duplicate-id)

Target application: Project Acorn

Element path: div:nth-child(2) > .styles_sidebarItem__y8q7s > .css-10nd86i > .css-1d2yego > .css-1wy0on6 > .css-1ep9fjw[aria-hidden="true"] > svg

Snippet:

<svg id="Layer_1" data-name="Layer 1" viewBox="0 0 36 36" class="styles_icon__1un-U"><defs><style>.cls-1{fill:#FFFFFF;}</style></defs><title>Chevron Up</title><path class="cls-1" d="M34.36,27,18,10.6,1.63,27,.05,25.37l18-18,18,18Z"></path></svg>

How to fix:

Fix any of the following:
  Document has multiple static elements with the same id attribute

Environment:
Chrome version 72.0.3626.121

====

This accessibility issue was found using Accessibility Insights for Web 2.0.4 (axe-core 3.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Move modals initialstate out of a separate file

modal initialstate shouldn't be in its own file. because the state is set during the running of the modal, the initialstate doesn't have to be set initially, but the component needs to be refactored as a result.

WCAG 2.4.1: Page must have means to bypass repeated blocks (html)

Issue: Page must have means to bypass repeated blocks (bypass)

Target application: Project Acorn
Happens with All endpoints

Element path: html

Snippet:

<html lang="en">

How to fix:

Fix any of the following:
  No valid skip link found
  Page does not have a header
  Page does not have a landmark region

Environment:
Chrome version 72.0.3626.121

====

This accessibility issue was found using Accessibility Insights for Web 2.0.4 (axe-core 3.1.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Add in Django

Adding in Django support would be a great additional framewoork

Store the state of the wizard in the VSCode's state object

Right now, we are keeping the wizard running in the background when the user switches tabs to store the progress in the wizard.

This is expensive but it's not a small fix.

The solution is to store the state of the wizard in the vscode state after every change

The wizard needs to show what options have been selected on the right-hand sidebar

In order to show the progress a developer has made while using the wizard, the results need to show up on the right-hand sidebar.

This means that the view to selection different options must be converted to redux containers so that it can share the application state with the right-hand sidebar.

Acceptance Criteria:
As a selection is chosen on each wizard view, the resulting selection appears on the right-hand sidebar as per wireframes. Works for the following components:

  • App Selection Page
  • Front-end framework
  • Back-end framework
  • Pages

Fix import path in AzureAuth

SubscriptionClient and ResourceManagementClient are imported from a relative path right now. These need to be imported from 'azure-arm-resource'

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.