- Open your solution with Visual Studio
- Start the WebApi application as you would normally do (NOTE: ensure the WebApi is always up and running to make the SPA connect to your API successfully)
- Note down somewhere your WebApi URL (it will be something like
https://localhost:PORT
) - Open Visual Studio Code and click on
File
->Open Folder...
and browse to the SPA main folder (the one containingpublic
,src
, etc) - Once your folder has been opened in VS Code, expand the
public
folder, then theconfiguration
folder and open thesettings.dev.json
file for modifications - In the
settings.dev.json
replace theapiUrl
value with the WebAPI URL you previously noted - As the website will run on HTTPS, we need to generate a self-signed certificate. So, open now a Terminal window and type the following commands:
npm install -g mkcert
mkcert create-ca
mkcert create-cert
- Go to your SPA folder in Windows File Explorer, double click on the
ca.crt
file we just generated and a window will open. Perform the following steps:- Click on
Install Certificate...
- Keep the Store Location to
Current User
- Choose
Place all certificates in the following store
, browse and selectTrusted Root Certification Authorities
- Click on
Next
and thenFinish
- Click
Yes
on the next authorization window
- Click on
- Repeat the same steps above for the
cert.crt
file too - In the Terminal window run the following commands:
npm install --save-dev webpack-cli
npm upgrade --save-dev webpack-cli
- In the Terminal window run
npm install
- Once the installation has completed, in the Terminal window you can finally run
npm run dev
and your SPA will open up in your preferred browser
- Open the solution in Visual Studio and run the WebApi project
- Open the SPA folder in Visual Studio Code, open a Terminal window and run
npm run dev
Not recommended, just use Visual Studio Code
No, your local user should be enough