{"id":23427473,"url":"https://github.com/thesurenk/ionic-framework-website-starter","last_synced_at":"2025-04-12T19:22:16.622Z","repository":{"id":50319109,"uuid":"168459633","full_name":"thesurenk/ionic-framework-website-starter","owner":"thesurenk","description":"Building websites using Ionic Framework - Version 4","archived":false,"fork":false,"pushed_at":"2024-09-26T22:16:07.000Z","size":4167,"stargazers_count":9,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T13:38:39.187Z","etag":null,"topics":["ionic","ionic-framework","ionic4","starter","starter-project","static-website","website-boilerplate","website-development"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thesurenk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-31T03:55:37.000Z","updated_at":"2024-02-28T17:55:40.000Z","dependencies_parsed_at":"2024-12-15T01:02:30.158Z","dependency_job_id":"fabdf062-d68e-4a1d-97a9-0a30330952c0","html_url":"https://github.com/thesurenk/ionic-framework-website-starter","commit_stats":null,"previous_names":["thesurenk/ionic-framework-website-starter"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thesurenk%2Fionic-framework-website-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thesurenk%2Fionic-framework-website-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thesurenk%2Fionic-framework-website-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thesurenk%2Fionic-framework-website-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thesurenk","download_url":"https://codeload.github.com/thesurenk/ionic-framework-website-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618817,"owners_count":21134301,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ionic","ionic-framework","ionic4","starter","starter-project","static-website","website-boilerplate","website-development"],"created_at":"2024-12-23T06:30:41.702Z","updated_at":"2025-04-12T19:22:16.568Z","avatar_url":"https://github.com/thesurenk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ionic Framework Website Starter\nBuilding a static website using Ionic Framework and Ionic Icons.\n\nBuilt with [Ionic 5.0.0](https://ionicframework.com/docs/)\n\n# Using Ionic - Building a sample website\nAs per Ionic Framework's docs, there are several ways to build a site.\n\n## Option 1: Using CDN (Content Delivery Network)\nWe can include ionic.js and ionic.bundle.css in our html using a CDN. That's it.. the below HTML should load the ionic components\n\n```\n\u003chtml\u003e\n   \u003chead\u003e     \n     \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/@ionic/core@5.0.0/css/ionic.bundle.cs\"\u003e  \n   \u003c/head\u003e\n   \u003cbody\u003e    \n     \u003ch1\u003eSample H1 HTML Tag\u003c/h1\u003e\n     \u003cion-title\u003eSample Ion Title Component\u003c/ion-title\u003e\n\n     \u003c!-- Including ionic script --\u003e\n     \u003cscript src=\"https://unpkg.com/@ionic/core@5.0.0/dist/ionic.js\"\u003e\u003c/script\u003e\n     \u003cscript src=\"https://unpkg.com/ionicons@5.0.0/dist/ionicons.js\"\u003e\u003c/script\u003e\n   \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Option 2: Without CDN\nWhile the option to use CDN works best, the only drawback is that for every page load, ionic.js and ionic.css files are fetched from CDN. This can be optimized with cache and other strategies, we cannot avoid calls to an external url and load the files in the browser for the webpage to load.\n\nIonic 4 uses lazy loading so that user does not load components that are not used in your app or website. So, Ionic 4 is split in many different JS files. We will need to download the dependencies and make them available to the local html file. Here's the process:\n\n### The index.html file:\n\n```\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"core/css/ionic.bundle.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eSample H1 HTML Tag\u003c/h1\u003e\n    \u003cion-title\u003eSample Ion Title Component\u003c/ion-title\u003e\n    ...\n    ...\n    \u003cscript type=\"module\" src=\"core/dist/ionic/ionic.js\"\u003e\u003c/script\u003e\n    \u003cscript nomodule src=\"core/dist/ionic/ionic.esm.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Download the core folder?\n\nRun the below command (you will need npm installed)\n\n`$ npm install @ionic/core`\n\nThis will generate `node_modules` folder. Copy the folder from node_modules/@ionic/core to your project.\n\n### The folder structure should be as below:\n\n```\nprojectFolder\n|__core\n|  |__css\n|  |   |__ionic.bundle.css\n|  |__dist\n|  |   |__ionic(contains all dependent js files) \n|  |   |__ionic.js\n|  |   |__ionic.esm.js\n|__index.html\n```\n\nNote: Just downloading the `ionic.js` file from CDN https://unpkg.com/@ionic/core@latest/dist/ionic.js will not load the web page. This `ionic.js` has several dependencies other js files which are located under `core/dist/ionic`\n\n# Usage\nES6 modules are subject to same-origin policy. You need to run your script from a local server, open directly the file with a browser will not work.\n\nI used [http-server](https://www.npmjs.com/package/http-server) for our example.\n\n1. Install `npm install http-server -g`\n2. Go to this project root `$ http-server` \n   - When running the first time, will ask you for options. Choose `index.html` as start page.\n3. the above command will show the ip address and port the server is running. Usually it will be ` http://127.0.0.1:8080`. Open the above in a browser ` http://127.0.0.1:8080` or `localhost:8080`\n4. You will see a sample like this \n   \u003cimg width=\"827\" alt=\"ionic-framework-example-page\" src=\"https://user-images.githubusercontent.com/902972/79573022-9198c200-8083-11ea-8fa6-8f86752dc970.png\"\u003e\n\n# Resources\n-  Ionic framework docs https://ionicframework.com/docs\n- Ionic core on NPM https://www.npmjs.com/package/@ionic/core\n- ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthesurenk%2Fionic-framework-website-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthesurenk%2Fionic-framework-website-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthesurenk%2Fionic-framework-website-starter/lists"}