{"id":14976479,"url":"https://github.com/wujjpp/isomorphic-marko","last_synced_at":"2025-10-27T20:31:39.912Z","repository":{"id":130020048,"uuid":"85659255","full_name":"wujjpp/isomorphic-marko","owner":"wujjpp","description":"isomorphic-marko is a isomorphic web framework, it's based on [marko 4] [webpack 3] [babel 6]","archived":false,"fork":false,"pushed_at":"2018-01-02T10:34:51.000Z","size":980,"stargazers_count":18,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-01T08:05:41.650Z","etag":null,"topics":["babel6","browsersync","cdn","complie-enviroment","es6","isomorphic","javascript","marko","register","universal-web","webpack3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wujjpp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-21T04:32:06.000Z","updated_at":"2024-01-16T03:50:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"2823fe62-2cda-4b95-be06-02e07aa348d6","html_url":"https://github.com/wujjpp/isomorphic-marko","commit_stats":{"total_commits":168,"total_committers":1,"mean_commits":168.0,"dds":0.0,"last_synced_commit":"eaead2786d98eb35c7ea86dedff9c1bc741f8af0"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wujjpp%2Fisomorphic-marko","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wujjpp%2Fisomorphic-marko/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wujjpp%2Fisomorphic-marko/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wujjpp%2Fisomorphic-marko/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wujjpp","download_url":"https://codeload.github.com/wujjpp/isomorphic-marko/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553188,"owners_count":19491384,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel6","browsersync","cdn","complie-enviroment","es6","isomorphic","javascript","marko","register","universal-web","webpack3"],"created_at":"2024-09-24T13:53:56.927Z","updated_at":"2025-10-27T20:31:39.523Z","avatar_url":"https://github.com/wujjpp.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# isomorphic-marko\n\nIsomorphic Marko is an opinionated boilerplate for web\ndevelopment built on top of [Node.js](https://nodejs.org/),\n[Express](http://expressjs.com/) and\n[Marko 4](http://markojs.com/), containing modern web development\ntools such as [Webpack 3](http://webpack.github.io/), [Babel 6](https://babeljs.io/)\nand [Browsersync](http://www.browsersync.io/). Helping you to stay productive\nfollowing the best practices. A solid starting point for both professionals\nand newcomers to the industry.\n\n[![Build Status](https://travis-ci.org/wujjpp/isomorphic-marko.svg?branch=master)](https://travis-ci.org/wujjpp/isomorphic-marko)\n\n## Features\n- [Marko 4](http://markojs.com/)\n- [Webpack 3](https://webpack.js.org/)\n- [Babel 6](https://babeljs.io/)\n- Support client live reload\n- Supports server auto compile and restart\n- Support [less](http://lesscss.org/), [sass](https://sass-lang.com/)\n\n## How to Install\n```shell\n$ git clone https://github.com/wujjpp/isomorphic-marko.git\n$ cd isomorphic-marko\n$ npm install\n```\n\n## How to Run and Build\n#### Run\n```shell\n$ npm start\n ```\n\n#### Build\n```shell\n$ npm run build\n```\n\n#### Run in dist\n```shell\n$ npm run start:dist\n```\n\n#### About CDN\nSometimes, we should host our static files(js,css,image and etc) in CDN, for this case you should change seetings in  `/cdn_config.js`,\nfor example: if our CDN root is `http://cache.mycdn.com/`, change `//cache.YourCDN.com` to `//cache.mycdn.com`\n\n__/cdn_settings.js__\n```javascript\nexport default {\n  dev: {\n    publicPath: '/'\n  },\n\n  sit: {\n    publicPath: '//sitcache.mycdn.com/'\n  },\n\n  uat: {\n    publicPath: '//uatcache.mycdn.com/'\n  },\n\n  prod: {\n    publicPath: '//cache.mycdn.com/'\n  }\n}\n\n```\nthen use the following command for building, after built, upload the `/build/public` folder to CDN,  thats all.\n```shell\n$ npm run build -- prod\n```\nNOTE: double dashes are required and there is a `blank` between `--` and `prod`\n\n## Regist client entry in entry-settings.js\n**IMPORTANT** : The client entry registering file, you should register all client entries in this file for compiler, for improving build performance, you can disable any client entry built by set it's `include` attribute to `false`\n\n___/entry-settings.js___\n```javascript\nexport default {\n  // Home page\n  home: {\n    src: './src/routes/home/client.js',\n    include: true\n  },\n\n  // Test page\n  test: {\n    src: './src/routes/test/client.js',\n    include: false\n  }\n}\n```\nNOTE: The above settings command build system that \"Compile the `./src/routes/home/client.js` to `home[-xxxxxxxx].js` and dont compile `./src/routes/test/client.js` during developing\". anyway, all entries will be compiled in `build` mode\n\n## About complie enviroment\nWe defined 2 parameters for identity complie enviroment\n\n___/tools/webpack/client.build.js___\n```javascript\n...\nplugins: [\n  new webpack.DefinePlugin({\n    '__BROWSER__': true,\n    '__DEV__': false\n  }),\n  ...\n]  \n...\n```\nYou can use this 2 options in your code for condition compiling,\n\nFor example: In `/src/routes/test/app/component.js`, we use `__BROWSER__` to tell compiler `jquery.easypiechart` and `toastr` only built for BROWSER, actually it is useless and cannot be used in node enviroment.\n```javascript\nif (__BROWSER__) {\n  require('easy-pie-chart/dist/jquery.easypiechart')\n  require('toastr/toastr.scss')\n  var toastr = require('toastr')\n}\n\nexport default class Test {\n  onMount() {\n    $('.chart').easyPieChart({\n      easing: 'easeOutBounce',\n      onStep: function(from, to, percent) {\n        $(this.el).find('.percent').text(Math.round(percent));\n      }\n    });\n```\n\n## Analyse webpack stats\nWe have integrated tools for analysing bundled file, after run `npm run build`, try to type the following command in your terminal.\n\n```shell\n$ npm run analyse:client\n```\n\n```shell\n$ npm run analyse:server\n```\n\n```shell\n$ npm run analyse\n```\n\n## About Browsersync\nNavigate to [http://localhost:3001](http://localhost:3001) to open Browsersync control panel\n\n## Directory Layout\n```\n.\n├── /public/                     # Static files which are copied into the /build/public folder\n├── /src/                        # The source code of the application\n│   ├── /components/             # Top level marko components\n│   ├── /core/                   # Core module or utility library\n│   ├── /layouts/                # Layout marko\n│   ├── /routes/                 # Routes or pages\n│   │   ├── /home/               # Example home page\n│   │   │   ├── /components      # Page level compoment\n│   │   │   ├── /images          # Page level images\n│   │   │   ├── client.js        # Entry of client script\n│   │   │   ├── index.js         # Router for server side\n│   │   │   └── layout.marko     # Page template marko\n│   │   └── /xxxx/               # xxxx page    \n│   ├── /styles/                 # Global stylesheets\n│   ├── /vendor/                 # Customised third-party library\n│   ├── /assets-loader.js        # Loader for loading assets.json\n│   └── /server.js               # Express server app\n├── /tests/                      # Unit and end-to-end tests\n├── /tools/                      # Build automation scripts and utilities\n│   ├── /analyse/                # analyse tools for webpack stats\n│   ├── /libs/                   # Library for build system\n│   ├── /loaders/                # Custom webpack loader\n│   ├── /plugins/                # Custom webpack plugin\n│   ├── /webpack/                # Webpack config files\n│   ├── /build-client.js         # Scripts for build client app\n│   ├── /build-server.js         # Scripts for build server app\n│   ├── /build.js                # Scripts for build client and server\n│   ├── /clean.js                # Cleans up for the output (build) folder\n│   ├── /config.js               # Build config file\n│   ├── /copy.js                 # Copy package.json, public folder and assets.json\n│   ├── /post.config.js          # Configuration for transforming styles with PostCSS\n│   ├── /run.js                  # Helper function for running build automation tasks\n│   ├── /start.js                # Launches the development web server with \"live reload\"\n│   └── /watch.js                # watch public folder, if changed copy files to dist/public folder\n├── package.json                 # The list of 3rd party libraries and utilities\n├── cdn-settings.js              # Configure CDN for each enviroment\n├── entry-settings.js            # Configure client entry for built\n└── port-settings.js             # Configure server port (browsersync and backend server)\n```\n\n## How to Update\n```shell\n$ git checkout master\n$ git pull origin master\n$ npm install\n```\n\nMade with ♥ by Wu Jian Ping\n\nFeel free to contact me if you have any problem [830390@qq.com](mailto:830390@qq.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwujjpp%2Fisomorphic-marko","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwujjpp%2Fisomorphic-marko","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwujjpp%2Fisomorphic-marko/lists"}