3. Create a React app for your web site
The React app will be the user interface for this simple app. All of the code is provided for you:
- Sample basic app - on branch named
1-basic-app-with-api
Create React app with npm targeting TypeScript
Open VS Code in the directory, which will become the root of the project.
In VS Code, open an integrated bash terminal. All remaining terminal commands should be run from the same terminal unless otherwise specified.
In the root of the project, create a create-react-app in
/appdirectory with the following command:npx create-react-app app --template typescriptInstall dependencies for the local React app:
cd app && npm install typescript --save-dev && npm installChange
./app/tsconfig.jsonto ignore compile errors for any variables without a specified type:"noImplicitAny": falseThis specific step is to bypass any issues with create-react-app. In your professional projects, once you are comfortable with your build and deployment of the app, return to this setting and set it to
true. Resolve any compile-time errors for TypeScript before committing these changes to source control.
Build and run local React app
Verify local React app builds successfully by running the following command from the
./appdirectory:npm run buildIf you run into errors, which may happen depending on the version of various packages and your environment, fix the errors before continuing. It is important to know that your project successfully builds locally before moving deployment to Azure Static Web Apps.
Run the project, which should open the project in a browser to
http://localhost:3000/:npm startWhen you see the project successfully loaded in the browser, go back to bash terminal and stop the runtime with Ctrl + c.
In the bash terminal, move back to the root of the project:
cd ..Leave this bash terminal open, you will return to it in a later step.
Commit app changes to source control
In the VS Code integrated bash terminal, commit the source control to the remote repo:
git add . && \
git commit -m "react app" && \
git push origin main