Code Monkey home page Code Monkey logo

spa-starter's Introduction

SPA Starter Kit

Sample application to learn modern SPA development.

Current Structure

.
├── config
│   ├── postcss.config.js
│   ├── project.dev.js
│   ├── project.paths.js
│   ├── webpack.common.js
│   ├── webpack.dev.js
│   └── webpack.prod.js
├── scripts
│   └── dev-server
│       └── index.js
└── src
    ├── index.html
    ├── index.js
    ├── index.scss
    ├── layouts
    │   ├── CoreLayout
    │   │   ├── CoreLayout.scss
    │   │   ├── index.js
    │   │   └── onCoreLayout.js
    │   ├── ReactRoot
    │   │   ├── ReactRoot.scss
    │   │   ├── index.js
    │   │   └── main.js
    │   ├── pages
    │   │   ├── Home
    │   │   │   ├── index.js
    │   │   │   └── setupHome.js
    │   │   └── SamplePage
    │   │       ├── index.js
    │   │       └── setupSamplePage.js
    │   └── samples
    │       ├── ImageArea
    │       │   ├── ImageArea.html
    │       │   ├── ImageArea.scss
    │       │   ├── assets
    │       │   │   └── owl.png
    │       │   ├── copyright.html
    │       │   └── index.js
    │       ├── LazyArea
    │       │   ├── LazyArea.html
    │       │   ├── LazyArea.scss
    │       │   ├── LazyContent.js
    │       │   └── index.js
    │       ├── SampleArea.js
    │       ├── index.js
    │       └── index.scss
    └── styles
        ├── card-like.scss
        └── palette.scss

Running the Project

# start the develompent server
$ npm run start

Building for Production

# generate `./dist` directory
$ npm run build

Result is like below:

$ tree dist
dist
├── index.html
├── media
│   └── owl.[hash].png
├── scripts
│   ├── app.[hash].js
│   ├── app.[hash].js.map
│   ├── lazy-content.[hash].js
│   ├── lazy-content.[hash].js.map
│   ├── manifest.[hash].js
│   ├── manifest.[hash].js.map
│   ├── vendor.[hash].js
│   └── vendor.[hash].js.map
└── styles
    ├── app.[hash].css
    └── app.[hash].css.map

Logging

Run the following on browser console.

> localStorage.debug = 'spa-starter:*';

spa-starter's People

Contributors

x7c1 avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.