用Azure静态Web应用+React构建库存管理应用，第一部分

吴欣
74 阅读4分钟

这是#30DaysOfSWA的一部分

在这个系列中，我将带你从最开始的生成一个React应用并在5分钟内部署它。在接下来的部分中，我将在同一个应用的基础上继续构建，并加入后台和其他东西。

场景

你正在考虑对一个新的库存管理系统进行原型设计。有两件事你想测试一下。

  • React，你希望有类似客户端的体验，你听说很多公司都在使用React。
  • Azure Static Web Apps，Azure上有这样的服务，不仅可以让你存储静态文件，还可以为它添加后台和授权。

是时候评估了。

创建一个React应用

为了建立你的前端应用程序，你想快速启动和运行。你开始阅读，发现有很多方法可以开始。

  • 仅仅是CDN，这在你只想尝试的时候是可行的。你想要的是你可以继续建立的东西。
  • Create React App，这绝对是一个好的选择，在React的官方文档中也提到了。
  • Vite.vitejs.dev/，这看起来真的很有希望
  • Webpack，也是一个很好的选择，外面有很多关于构建React应用的好指南，例如，levelup.gitconnected.com/how-to-setu…
  • Snowpack，你听同事说过这个，所以你决定去看看，www.snowpack.dev/tutorials/r…

你看了看Snowpack，它看起来只有很少的命令就可以开始了，你决定试一试。

使用Snowpack生成项目

要用Snowpack创建一个项目，只需要一行代码。

  1. 运行下面的命令来生成一个Snowpack项目。

    npx create-snowpack-app react-snowpack --template @snowpack/app-template-minimal

    你会得到一组文件，在这一点上，你有一个Snowpack项目，但不是一个真正的React应用。

    让我们看看它是如何工作的。

  2. 运行下面的命令来启动你的Snowpack生成的应用程序。

   cd react-snowpack
   npm run start

在浏览器中，在http://localhost:8080/，你应该看到 "欢迎来到Snowpack"。

添加React

接下来让我们添加所需的依赖项，以增加对React的支持。

  1. 运行npm install 来安装React。

    npm install react react-dom --save

  2. 运行mv ，将你的index.js重命名为index.jsx。

    mv index.js index.jsx

    现在，你有一个文件，你将在其中引导你的React应用程序。

  3. 在index.jsx中，添加以下代码。

    import React from 'react';
import ReactDOM from 'react-dom';

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';
import App from './App'

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

  4. 创建App.jsx，并赋予它以下代码。

    import React from 'react';

function App() {
  return (<div>App</div>)
}

export default App

  5. 修改index.html，给它添加以下元素。

     <div id="root"></div>

    在这一点上，你有一个工作的React应用程序。试着用npm start 在本地运行它。

计划你的部署

为了使用Azure Static Web App，我们首先需要。

  • 创建一个GitHub repo。
  • 创建一个本地 repo 并与 GitHub repo 同步。
  • 添加一个提交。

创建 repo

到GitHub上创建一个 repo，随你怎么命名，在下面的例子中，我们命名为snowpack-demo。

在你的控制台中运行以下命令。

  echo "# snowpack-demo" >> README.md
  git init
  git add.
  git commit -m "first commit"
  git branch -M main
  git remote add origin https://github.com/softchris/snowpack-demo.git
  git push -u origin main

你的应用程序现在被推送到GitHub repo。接下来，让我们把它部署到Azure。

SWA

确保你已经下载了Visual Studio代码的Azure Static Web Apps扩展，同时也确保你有一个Azure账户。

  1. 在Visual Studio Code的左侧菜单中选择Azure标志。
  2. 选择静态网络应用部分的**+**图标。
  3. 遵循一系列的步骤
    1. 选择订阅
    2. 给出应用程序的名称
    3. 应用程序的位置/（如果你把你的应用程序放在子目录app中，你需要输入/app）
    4. 选择模板，React。
    5. 指定你的应用程序建立的文件夹。

你的应用现在正在部署，你现在可以点击弹出的信息，上面写着 "在GitHub中打开行动"，或者去GitHub上的repo和行动标签。1-2分钟后，或者更短，你会在Visual Studio Code中看到一个部署的URL，选择它。

恭喜你，你把你的应用程序部署到了Azure。这是我的应用程序。

happy-wave-036ec970f.1.azurestaticapps.net/

接下来是什么

你刚刚开始；这是第一部分。在下一部分中，我们将改进我们的应用程序，给它一个更好的用户界面并支持路由。在整个过程中，Azure静态Web应用将支持我们。

avatar
文章
阅读
粉丝