A demo app to demonstrate Metamatic's embedded out-of-the-box router feature.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A Demo About Using Metamatic

A demo app for showcasing Metamatic™ framework and testing it in different real use cases.


A minimal demo app written in ES6 on React to demonstrate & test routing with Metamatic framework.

Live Demo

Check out this demo built, deployed and hosted live here!


git clone https://github.com/develprr/metamatic-router-demo.git
cd metamatic-router-demo
npm install

Configuring IDE

The import statements in JS files in the project refer to other internal JS files using absolute paths assuming that src-folder is the root folder. Your IDE may not automatically grasp that so you have to mark src folder as Sources Root. If you use IntelliJ IDEA, right-click src folder and select from the context menu *Mark Directory As -> Sources Root".

Starting the frontend

Make sure you have Node installed!

In project folder type:

npm start

Optional: Start CSS-Watcher

The CSS-styles in the project are defined in SASS files that end with .scss extension. To edit styles you have to edit those files. The project uses a SASS compiler to transpile SASS files into final CSS files. To compile SASS files into CSS, type:

npm run build-css

If you want to edit style on the fly when you develop the app it will ease your work if you don't need to explicitly type, refresh or restart anything every time you have edited SASS files. Therefore start CSS-Watcher to automatically do it for you:

npm run watch-css


Heikki Kupiainen / metamatic.net