https://github.com/thesurenk/ionic-framework-website-starter
Building websites using Ionic Framework - Version 4
https://github.com/thesurenk/ionic-framework-website-starter
ionic ionic-framework ionic4 starter starter-project static-website website-boilerplate website-development
Last synced: 11 months ago
JSON representation
Building websites using Ionic Framework - Version 4
- Host: GitHub
- URL: https://github.com/thesurenk/ionic-framework-website-starter
- Owner: thesurenk
- License: mit
- Created: 2019-01-31T03:55:37.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-26T22:16:07.000Z (over 1 year ago)
- Last Synced: 2025-03-26T13:38:39.187Z (12 months ago)
- Topics: ionic, ionic-framework, ionic4, starter, starter-project, static-website, website-boilerplate, website-development
- Language: JavaScript
- Homepage:
- Size: 3.97 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ionic Framework Website Starter
Building a static website using Ionic Framework and Ionic Icons.
Built with [Ionic 5.0.0](https://ionicframework.com/docs/)
# Using Ionic - Building a sample website
As per Ionic Framework's docs, there are several ways to build a site.
## Option 1: Using CDN (Content Delivery Network)
We 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
```
Sample H1 HTML Tag
Sample Ion Title Component
```
## Option 2: Without CDN
While 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.
Ionic 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:
### The index.html file:
```
Sample H1 HTML Tag
Sample Ion Title Component
...
...
```
### Download the core folder?
Run the below command (you will need npm installed)
`$ npm install @ionic/core`
This will generate `node_modules` folder. Copy the folder from node_modules/@ionic/core to your project.
### The folder structure should be as below:
```
projectFolder
|__core
| |__css
| | |__ionic.bundle.css
| |__dist
| | |__ionic(contains all dependent js files)
| | |__ionic.js
| | |__ionic.esm.js
|__index.html
```
Note: 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`
# Usage
ES6 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.
I used [http-server](https://www.npmjs.com/package/http-server) for our example.
1. Install `npm install http-server -g`
2. Go to this project root `$ http-server`
- When running the first time, will ask you for options. Choose `index.html` as start page.
3. 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`
4. You will see a sample like this
# Resources
- Ionic framework docs https://ionicframework.com/docs
- Ionic core on NPM https://www.npmjs.com/package/@ionic/core
-