DEV Community

Elio Struyf
Elio Struyf

Posted on • Originally published at eliostruyf.com on

How to make local Azure Static Web App development easier

Static sites are cool again (actually for a long time), and Microsoft knows that. Their new Azure Static Web App - App Service is currently in preview. At the moment, it still misses some key functionalities, but I am sure that these will get added once they put it in GA (hopefully to be announced at Ignite in September 2020).

Info : The features I am mostly missing are the capability to link your Azure AD App and root domain configuration (at the moment only www works). Also, the option to gain access to the Storage Account the Functions are using might be useful.

The learning paths and documentation are a great way to get you started (Azure Static Web Apps documentation). Suppose you followed any of the learning paths or documentation for local development. They tell you how to start your Azure Functions and local server with Live Server extension for VSCode.

My preference is to run it without the VSCode extension. Instead, I make use of NPM scripts. By using a script, I can run and test it anywhere I want.

Running static web app locally

To run the static web app locally, you will need the following NPM dependency: npm-run-all. If you want, you can also use concurrently, but my preference is the first one.

This dependency allows you to run multiple commands sequentially or in parallel. For the static web app, this is what we need. We need the server for the site, and the Azure Functions instance both running at the same time.

Here is my default configuration:

"scripts": {
  "start": "npm-run-all --parallel start:*",
  "start:dev": "react-scripts start",
  "start:api": "cd api && npm start"
}
Enter fullscreen mode Exit fullscreen mode

Info : I like to use React, but if you use any other framework, be sure to modify the start:dev command to build and spin up your local server.

All you need to do is run the npm start command, and both services will start locally.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more