Wedding Registration Application
This is a practice application for front-end and back-end communication. My goal is to understand how back-end and front-end communicate, what issues will I be running into, and test how back-end works.
​
Front-end: ReactJS
Front-end plugins: react-browser-router
Other front-end applications: fontawesome, Bootstrap CSS, and some Google fonts
Back-end: ASP.Net (C#), SQL Server and SSMS (SQL)
Other back-end extensions: SQL server Data Tools, Web Live Preview, ASP.NET Core 6 Runtime
Deploy Platform: IIS
Tutorial: ASP.NET, Reactjs IIS Setup, SSMS(SQL), CORS
Remember to restart the remote server, set up server security before hand, and set up inbound rules
This is an example of my inputs being registered to my SQL API.
Problems and Solutions:
Bypassing CORS
One of the problems that I encountered is CORS. CORS is Cross Origin Resource Sharing. In simple term, it prevents 2 different host from communicating from one and another. In order to bypass CORS, we need to add policy to the API to let them communicate.
​
​
To start, use the variable the reference your web application builder.
​
Then, call the Services and call AddCors. In that you can add policy. In AddPolicy function, you have 2 paramenters: the name of the policy and the rules (network IP, Methods and Header).
​
The first one is easy, the name, you can name it whatever you wants but it has to be a string.
​
Next is our rules, there are 3 main components to the rule like previously mentioned network IPs, Methods, and Header. Network IPs is called with the function withOrigins, there you can include as much as IP addresses as you can separate with a comma, or if you want to include all IP use * symbol. Next is Methods which is WithMethods or AllowAnyMethod, they are permission to read and write. Most common methods are PUT, GET, POST, and OPTIONS. Last is Header, AllowAnyHeader or WithHeaders, it is the media type that allows to be passing through like audio/gg or image/png.
After finishing up your policy, you can call it by using UseCors and type in the name of that policy.
IIS Setup
When you first set up IIS. If your website have multiple pages, you will encounter this error
​
​
​
To fix this, create a web.config file then pace the code in
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
​
And there we go, your navigation should work now.
Migrating Databases
​
​
​
​
Save to any location you wish and it should create a XXX.bacpac file
To import right-click on the databases file you want and hit import Data-tier Application
Select the file you saved and it should imports and WHOOLAH! You have migrated a database to another server