Skip to content

Sample Blog App built using Micro Apps (a micro frontends framework with express, browserify, handlebars & sass)

Notifications You must be signed in to change notification settings

gautamarora/microapps

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Blog

This blog application is a mega-app that is built using a micro-app architecture. Each page (post, photo, profile) is a micro-app that uses expressjs, browserify, handlebars & sass. These micro-apps share other micro-apps like header. Each micro-app is published as a npm module at npmjs.com from where it is installed into the mega app.

The modular architecture is inspired from See-Eat-Sleep/AppUp and Condé Nast Traveler.

Micro Apps used:

  1. core
  2. header
  3. homepage
  4. post
  5. photo
  6. profile

How to run

  1. Clone the blog repo:

     git clone git@github.com:gautamarora/blog.git
    
  2. Install dependencies:

     cd blog
     npm install
    
  3. Run the app:

     npm start
    

Now go to localhost:3000 to see the sample blog app

How to dev

For development, its easiest to softlink all the dependencies to local folders for the microapp dependencies, here is how:

  1. Clone all the microapp dependency repos:

     git clone git@github.com:gautamarora/core.git
     git clone git@github.com:gautamarora/header.git
     git clone git@github.com:gautamarora/homepage.git
     git clone git@github.com:gautamarora/post.git
     git clone git@github.com:gautamarora/photo.git
     git clone git@github.com:gautamarora/profile.git
    
  2. Install dependencies for all the above repos by running this command in each of them:

     npm install
    
  3. Create softlinks for all the dependencies by running this command in each of them:

     npm link
    
  4. Now go back to the blog repo and softlink it to the locally cloned repos:

     npm link core
     npm link header
     npm link homepage
     npm link post
     npm link photo
     npm link profile
    
  5. Now you can make edits to any microapp locally, and the changes will be reflected when you run the blog app:

     npm start
    

Live Examples

www.gautamarora.com

About

Sample Blog App built using Micro Apps (a micro frontends framework with express, browserify, handlebars & sass)

Resources

Stars

Watchers

Forks

Packages

No packages published