Ionic Angular with Scully

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/