Deployment

From Poetry MP Wiki
Revision as of 12:06, 14 September 2022 by Admin>Soulmate (→‎Customize Website for the Sake of PWA)
Jump to navigation Jump to search

Device Requirements

iOS

iPhone X and iOS 14 or above.

iPad 5 and iOS 14 or above.

Android

Andoid 7

Windows PC

Windows 7, latest Chrome.

Mac

Catalian, Safari 13.1, Chrome 104

Yosemite, Chrome 87

Static Readonly

PoemApp can be a static read only Website, without a Web service backend. The SPA frontend codes may load static JSON data from the Web server, through being configured as StaticReadonly. The poems data is exported into JSON files using the full app. Such deployment makes a static content Website has rich user interfaces and user interactions, including search functions. This is fairly similar to CHM data format and the CHM browser. The initial site title is “Poetry Collection” as defined in the title tag of index.html. And the site title is defined in siteconfig.js as “siteName” which will render the site title in HTML.

Example 1: conf/siteconfig.js for George Gordon Byron Poetry Demo Page<syntaxhighlight lang="json"> const SITE_CONFIG = { siteName: 'Byron Collection', staticReadonly: true, staticDatas: [ {filename: 'Byron'}, ] } </syntaxhighlight>And file Shelley.JSON should be located at folder "data".

Since the SPA is not hosted in a Website root but a sub folder "byron", in "index.html", make sure tag base/href point to this, like:<syntaxhighlight lang="html"> <base href="/byron/"> </syntaxhighlight>If you host the SPA at the Website root, you may have:<syntaxhighlight lang="html"> <base href="/"> </syntaxhighlight>


Example 2: for Chinese Poetry of Li Bai with 2 writing systems<syntaxhighlight lang="json"> const SITE_CONFIG = { siteName: '李白诗集', staticReadonly: true, staticDatas: [ {filename: 'primary', secondaryFilename: 'secondary'} ] } </syntaxhighlight>Both "primary.json" and "secondary.json" should be in folder "data".

Example 3: for multiple poets at demo page<syntaxhighlight lang="json"> const SITE_CONFIG = { siteName: 'Poetry Collections', staticReadonly: true, staticDatas: [ {filename: 'Shelley', poetName: 'Percy Bysshe Shelley'}, {filename: 'Byron', poetName: 'George Gordon Byron'}, {filename: 'EdgarAllanPoe', poetName: 'Edgar Allan Poe'}, {filename: 'LiBai', poetName: '李白', secondaryFilename: 'LiBai2nd'} ] } </syntaxhighlight>

Deploy to ISP Provided Website

An ISP often by default provides a customer with the such Website or Home Pages Service:

Generally you may use FTP to upload your static contents to there. For more details of uploading, please refer to the instructions provided by your ISP.

ISP gives you a Website

Good luck. Your SPA should be working right away at http://YourUserName.superisp.com.

If your SPA shouldn’t be your home page content, you may want the access URL to your SPA to be such: http://YourUserName.superisp.com/MySPA.

  1. Create folder MySPA under the Web root.
  2. Optionally modify "conf/siteconfig.js" and "index.html" as shown in the examples above.
  3. Upload the SPA static contents.

ISP give you a path to a Website shared by all users

To host your SPA at http://users.isp.com/YourUserName, modify the base tag of index.html to <base href="/YourUserName/">.

To host your SPA at http://users.isp.com/YourUserName/MySPA, modify the base tag of index.html to <base href="/YourUserName/MySPA/">.

Prepare Poetry Contents

(Under construction)

Customize Website for the Sake of PWA

If you don’t expect your users to install the Web app as a mobile app, you don’t have to deal with such customization.

PWA

Both the static readonly and the full app are designed with PWA in mind. You may modify the Web app manifest “manifest.webmanifest” according to the instruction at https://web.dev/add-manifest/. And generally you just need to modify: * Name * Short_Name * Description

The default values is for the full app, therefore, it is almost certain that you should change them.

SEO

In Index.html, There is a script section like:

<syntaxhighlight lang="html"><script type="application/ld+json"> 

   {
   "@context": "http://schema.org",
   "@type": "WebApplication",
   "description": "Poetry collection",
   "keywords": "Poetry,Poems,Poet,Muse",
   "browserRequirements": "requires HTML5 support",
   }

</script></syntaxhighlight> Web spiders will pick up this and make appropriate indexing.

Deploy to Github Pages

GitHub gives you are Website like https://YourUserName.github.io. Each repository may have a home page like https://YourUserName.github.io/repo1 and https://YourUserName.github.io/repo2 and so on. For more details of uploading, please check: https://pages.github.com/ or https://docs.github.com/en/pages.

The following descriptions assume that you have read the GitHub Pages manual, and the repository gh-pages is already in place.

Steps:

  1. Copy the build to the gh-pages repository.
  2. Modify index.html and ensure <base href="/poems/"> or alike.
  3. Commit and push.
  4. Test. It may take Github.io a few dozen seconds to reflect the changes just being pushed.

Deploy to AWS S3 Bucket

https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html

For example: http://fonlow.heroes.s3-website-us-east-1.amazonaws.com/

AWS Provide the following means to publish:

  1. Web UI the S3 console
  2. REST API. This could be used automatic deployment from client sides.
  3. AWS SDKs
  4. AWS CLI

As part of the AWS Free Tier, you can get started with Amazon S3 for free. Upon sign-up, new AWS customers receive 5GB of Amazon S3 storage in the S3 Standard storage class; 20,000 GET Requests; 2,000 PUT, COPY, POST, or LIST Requests; and 100 GB of Data Transfer Out each month. @ https://aws.amazon.com/s3/pricing/?p=ft&c=wa&z=2

And NO HTTPS access.

Good enough for the SPA which requires loading basically once.

Multiple Poetry Collections in One Website

Each collection has its own index.html and conf and api/files/file, while sharing scripts and assets.

An ISP provides a customer with the such Website: http://users.isp.com/UserName

Github Pages provides a user with the following Website: https://UserName.github.io/ProjectName

To host multiple SPA apps, do the following. 1. Use FTP or GitHub gh-pages to copy each SPA app to a foder, like Heroes 1. Alter index.html’s base ref to /UserName/Heroes/ 1. Test http://users.isp.com/UserName/Heroes

Even if you have only 1 app, you may still want this way, because in your Web root, you may want other static HTML contents.

To host multiple Poetry collections, basically you may do what outlined above. Since these collections should be using the same codebase, it is better to make these collections share the same set of codes, while with separated. 1. In folder /UserName/Collections/, put folders “assets” and “scripts”. 1. Put each collection to UserName/Collections/Collection1 and so on. Each collection has its own files and folders: * index.html. Replace the references to scripts to something like <script src="../scripts/runtime.31b9d232e3f708d6.js". Everytime the app scripts is updated, changes need to be made accordingly to adapt the new version. * folder conf. Alter sitename and other settings accordingly * folder data * folder api/files/file 1. Test http://users.isp.com/UserName/Collections/Collection1.

Data Update

  1. Using the full app, export the published, and optionally export the 2nd edition of the published.
  2. Rename the JSON files to primary.json and secondary.json, and overwrite what in the gh-pages repository;
  3. If there are new image files associated, the copy things to api/files/file/.
  4. Commit and push.

Casual App Fontend Update

  1. Production build
  2. Update the following files:
    1. Clear folder scripts and fill with new files
    2. index.html and alter base href to “/poems/” or alike.

If there are changes in assets, copy things accordingly.

Customize Styles After Deployment

font.css is not among the NG build process and is referenced in index.html directly. This is an interface for customization of some sections of the app.

You can introduce new fonts and new styles to respective sections through altering font.css and copying some font files (WOFF2 typically) under assets/fonts. For more details, check readme.MD in poemsng\src\assets.

Web App

During development, the frontend and the backend are often running on different hosts. Almost all features of the app could run well in such config, except the locally hosted pictures. The locally hosted pictures are using related patch in img src, and such constraint is good for static readonly deployment.

The backend and the fontend should be hosted in the same host. And the DB engine is with Sqlite.

Build

Run “DotNetPublishToLocalIIS.bat” to build and copy files to local IIS hosted site “poems.localhost”.

This site contains directories “Dictionary” and “JiebaResource” which are for Chinese simplifed and traditional convertion.

Release for Chinese

Zip the files then the relese is done.

Release for All Ohters

  1. Remove directories “Dictionary” and “JiebaResource”.
  2. In appsettings.json, set SupportChinese to false, or simply remove the setting.

Then zip and release.

Deploy to IIS

Prerequisites: 1. ASP.NET Core Runtime Hosting Bundle

Desktop App

The releases for desktop app are basically the same as the ones for Web App, however, the release is hosted in a local Web server Kestrel included in ASP.NET Runtime.

Prerequisites: 1. ASP.NET Core Runtime

Installation 1. Extract the files to a desired folder such as “c:". 2. In folder, double click”CreateShortcut.bat” which will create a shortcut on Windows desktop

Double click the shortcut to launch the app.

You can copy or move the shortcut to any lauch area of Windows.

Mobile App

Static Readonly Mobile App

This is basically the static readonly self contained in an app container.

Retrieved from "https://poetryappwiki.fonlow.org/w/index.php?title=Deployment&oldid=20"