Scully is the Static Site Generator for Angular application. And Ionic can use Angular to create an application.

So, we can use Scully for Ionic application.

Environment

$ ionic -v          
6.10.2

$ npm ng -v   
6.10.2

Step by Step

Step1: Setup Ionic Project

For beginning, we need to set up a new Ionic Angular project.

$ npx @ionic/cli start
$ cd PROJECT_DIR

Step2: Add scully

Next, we can add scully into the project by ng add @scullyio/init.

$ npm run ng add @scullyio/init
Installing packages for tooling via npm.
Installed packages for tooling via npm.
    Install ng-lib for Angular v9
    ✅️ Added dependency
UPDATE src/app/app.module.ts (832 bytes)
UPDATE src/polyfills.ts (3059 bytes)
UPDATE package.json (1771 bytes)
✔ Packages installed successfully.
    ✅️ Update package.json
    ✅️ Created scully configuration file in scully.app.config.ts
CREATE scully.app.config.ts (178 bytes)
UPDATE package.json (1831 bytes)

Step3: Build it!

After that, we can build the application as statically by the simple two commands.

// Build Ionic application
$ npm run build

// Generate Static Site By Scully
$ npm run scully

Tips: add npm run export command into the package.json

I think adding the command is more useful for development.

diff --git a/package.json b/package.json
index 0fdd23d..7b0f2b0 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "lint": "npm run ionic lint",
     "e2e": "npm run ionic e2e",
     "scully": "scully",
     "scully:serve": "scully serve",
+    "export": "npm run build && npm run scully"
   },
   "private": true,
   "dependencies": {

Step4: Check the static site

Finally, we can check the generated site by the scully:serve command.

% npm run scully serve
> scully "serve"

starting static server

----------------------------------
Using stored unhandled routes!.
   To discover new routes in the angular app use "npm run scully -- --scanRoutes"
----------------------------------
Scully static server started on "http://localhost:1668/"
Angular distribution server started on "http://localhost:1864/"

Where is the generated codes?

Scully will place the generated files to the dist/static directory.

So we can deploy the generated site by uploading the directory files.

Example: Serve the site by PHP

$ cd dist/static
$ php -S localhost:8000

Demo site

This is the demo site and GitHub repository.

GitHub: https://github.com/hideokamoto/ionic-angular-scully

Demo Site: https://ionic-angular-with-scully-example.netlify.app/