Skip to content

Bump vite from 5.4.2 to 5.4.6 in the npm_and_yarn group across 1 directory #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Bump vite from 5.4.2 to 5.4.6 in the npm_and_yarn group across 1 directory #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c74236
Add MSAL
pm7y Jun 25, 2024
4778fea
Bump vite in the npm_and_yarn group across 1 directory
dependabot[bot] Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# Copy this file as .env.local and replace the values with your own
VITE_MSAL_CLIENT_ID=<your-client-id>
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,3 +396,5 @@ FodyWeavers.xsd

# JetBrains Rider
*.sln.iml
dist
.env.local
49 changes: 27 additions & 22 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
# Steps

Register a new app in Entra Id
https://learn.microsoft.com/en-us/entra/identity-platform/scenario-spa-app-registration

Scaffold a new React/Typescript app.
https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts

Expand All @@ -14,37 +17,39 @@ npm run dev
Install the MSAL React package.

```
npm install react react-dom
npm install @azure/msal-react @azure/msal-browser
```

# React + TypeScript + Vite
https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-react-samples/typescript-sample/README.md

## Setup Entra Id App Registration

To run the app you will need an Azure subscription so that you can create an Entra Id App Registration. You can either do that manually in the Azure portal or by using the Azure CLI and the following steps.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
1. Install Azure CLI (if you haven't already): Follow the installation instructions for your operating system from the [official Azure CLI documentation](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli).

2. Sign in to Azure

```
az login --tenant "your-tenant-id"
```

Currently, two official plugins are available:
3. Create the app registration and note the "appId" (client Id) and "id" (object id) that is output in the json:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
```
az ad app create --display-name "YourAppName" --sign-in-audience "AzureADMultipleOrgs"
```

## Expanding the ESLint configuration
4. Add a SPA redirect URI, replace <your-app-object-id> in the following command with the "id" from step 3:

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
```
az rest --method PATCH --uri 'https://graph.microsoft.com/v1.0/applications/<your-app-object-id>' --headers 'Content-Type=application/json' --body {"spa":{"redirectUris":["http://localhost:5173/"]}}'
```

- Configure the top-level `parserOptions` property like this:
5. Add Microsoft Graph API permissions, replace your-app-client-id in the following command with the "appId" from step 3:

```js
export default {
// other rules...
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
project: ["./tsconfig.json", "./tsconfig.node.json"],
tsconfigRootDir: __dirname,
},
};
```
az ad app permission add --id "your-app-client-id" --api 00000003-0000-0000-c000-000000000000 --api-permissions 311a71cc-e848-46a1-bdf8-97ff7156d8e6=Scope
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
6. Edit authConfig.ts and replace the clientId with the "appId" from step 3. You should now be able to run the app and login.
7 changes: 3 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,11 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="./assets/entra.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS + Tailwind</title>
<title>React MSAL Demo</title>
</head>
<body
class="text-base bg-white dark:bg-slate-800 text-slate-900 dark:text-white">
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
Expand Down
Loading