In this article, I will introduce how to deploy the app to production environment in 2 modes:
OK, for deploying the client and Api on different domains is rather simple as below:
ApiBaseUrl
in app/config/appConfig.ts point to Api domainOpen your code in Visual Studio and navigate to "configurations/configuration.release.config" in app.common
project as below:
<?xml version="1.0" encoding="utf-8" ?><appconfiguration> <authentication tokenExpiredAfterInMinute="20" ></authentication> <paging pageSize="10"></paging> <databases> <clear /> <add name="DefaultConnection" database="MyERP" server="<server>" port="<port>" userName="<username>" password="<pwd>" dbType="MSSQL" default="true"></add> </databases> <localization defaultLanguageCode="en"></localization> <uitest reportTemplate="templates/report.xlsx" notificationReceiver="thanhtuit27@gmail.com" zipFile="report_{0}.zip" environtmenFile="environments.xml" basePath="C:\data\projects\myERP\api\App.UI.Test\config\" baseOutput="C:\data\projects\myERP\api\App.UI.Test\output\" timeout="10"></uitest> <mail server="smtp.gmail.com" port="587" ssl="true" username="techcoaching123465789@gmail.com " password="pwd" displayName="No-reply" defaultSender="techcoaching123465789@gmail.com " /> <folder mailTemplate="templates/email/" baseResourceFolder="C:\data\projects\myERP\api\App.UI.Test/resources/"></folder></appconfiguration>
Please be aware of <databases />
. This is the list of connectionstrings
that were used in our app. By default, it's name is "DefaultConnection
".
Please update appropriate information as sample below:
<add name="DefaultConnection" database="MyERP" server="localhost" port="1433" userName="tinyerp" password="123456" dbType="MSSQL" default="true"></add>
App.Api
and select "Publish" from context menu: published
" from dropdownlist and click on "Publish" button at the bottom of dialog: The publish code was located at <solution root>/application.api/published.
To deploy the API, just upload this to API domain (for example: api.tinyerp.com
)
Using any FTP client to upload published file to your domain:
Access to api.tinyerp.com
, you will receive as below:
Please change the baseUrl
in "<root>/app/config/appConfig.ts" as below:
Open command prompt/ terminal and go to "<root>/client/", and run "gulp build
":
After this command was finished, the compiled code was located in "<root>/client/dist" folder:
Look at this folder, all ts files were compiled into js files and were compressed into "<root>/client/dist/bundle.js". The remaining are html/ image files.
Open the "<root>/client/dist/bundle.js", we see the content was compressed:
We can also apply some minification during the compile process. So the code is safe to be delivered.
Please use any FTP client tool, such as filezilla and upload those files into your domain (for example "tinyerp.com"). Then, we can check it by access to "http://tinyerp.com".
The result is the photo below:
Login with "tu.tran@yahoo.com/123456
". We will see default page as below:
Congratulations! You deployed your client successfully.
If looked at "<root>/client/dist", there is web.config file. We need this file when deploying the app on IIS.
There is rewrite rule in web.config, this will always redirect the request to index.html.
<rewrite> <rules> <rule name="Rewrite to default" enabled="true" stopProcessing="true"> <match url="^[^.]+$" /> <conditions> <add input="/api/" pattern="^OFF$"/> </conditions> <action type="Rewrite" url="/" /> </rule> </rules></rewrite>
Without this rule, IIS may not be able to handle request when user accesses "tinyerp.com/security/permissions".
To solve this, we need to install "Url Rewrite
" for your IIS. We can download it from here.
This mostly related to IIS issue. Please refer to this link for solving this problem.
To deploy API and client on the same domain, it was mostly the same as in separated domain. The compiled Api code was uploaded to the sample folder with client with some modifications:
App.Api
App.Api
The final folder will be:
聯(lián)系客服