Hi guys! Remember when we built/created our static web app? This time, we are going to deploy a live website in Azure and connect it to a Database.
If you missed the Static web app article, don't worry. You can find it here.
Let's go...
To deploy our live website, we need to create a new folder for our project on VsCode. Then, choose a Github repository and Git clone it on VsCode.
Step 1: Copy the url to the git you want to use.
Step 2: Open your vs-code terminal and run this command: git clone space your-git-url
Step 3 Cd into the folder you created on VsCode. Cd (name of the folder)
Step 4: Open your Gitbash in the terminal or download gitbash if you do not already have it installed.
Step 5: Open your gitbash, make sure you are using gitbash from your vscode terminal or directly from the gitbash app.
we have to install Node.js because git ignores node modules, if you run:
npm run start
you will get an error saying sh: 1: react-scripts: not found, to solve this problem run the following command
npm install
Now, run npm run start to run the app on your localhost.
You should see whatever you coded on your react-app as a link like https://localhost:3000. Copy the link and paste on your browser. This is to confirm that the process was successful and the website is live. The url should look like the image below while showing the website you want to host in Azure.
The next step is to build it by running the following command:
npm run build
The next phase is to create our App service on Azure. Follow the steps in the Static Web App article and when it gets to the Instance details, choose code, Node js and your operating system. If you are a beginner, select the free version of the pricing plan.
No need to authorize Github in the deployment stage. Disable it, Review and Create the web app.
Now, let's create our Database and Server.
Step 1: Search for Database, fill in the details, change the compute server from standard to basic, select an existing database server if you do not already have one and click create. I created a new server. See below:
You should see your pricing details as shown below. Go to networking and give the appropriate access. Review and create.
The next phase is the connection process.
Step 1: Go back to your newly created web app and select Advanced tools. Click Go.
Step 2: A new environment will open titled Kudu. Click on the Debug console.
Step 3: Click on"cmd", site and then wwwroot.
Remember the name of the folder you created on VsCode? Find it in your file manager and open it.
Step 4: Open the build folder, Drag all the files there and paste it in your wwwroot.
Go back to your web app and click browse. You should see the name of your webapp.azure.net.
The final stage is the connection stage.
Let's connect the web app to the database.
Step 1: Open the database and navigate to the connection strings.
Step 2: Go to ODBC and Copy the link. ODBC is for nodejs.
Step 3: Open your app service and go to configuration.
Step 4: Click on Application Settings and click New Application Setting
Step 5: Select a new name and in the value, paste the ODBC link you copied.
Step 6: Click ok and save.
Go back to your overview and check. There you go!
Hope this guide was helpful.
Top comments (0)