项目作者: vicdata4

项目描述 :
Lightweight web application based on web-components.
高级语言: JavaScript
项目地址: git://github.com/vicdata4/seed.git
创建时间: 2019-06-06T13:47:57Z
项目社区:https://github.com/vicdata4/seed

开源协议:

下载


Lightweight web application based on web-components.

folder tree

_ assets\
|
|
images\
| |
| backgrounds\
|
|
pwa_icons\
|
| translations\
|
|
flags\
| scripts\
|
|
utils\
|_ src\

|_ components\

|_ middleware\

| store\
|
|
actions\
|
|_ reducers\

|_ utils\

|_ views

Dependencies:

Link: https://seed-project.dev/

Run project

  1. git clone https://github.com/vicdata4/seed.git
  • Create config.js file from root to specify your host address and token prefix as below.
  1. export const prefix = 'prefix-string';
  2. export const url = 'http://your-host-address';
  1. npm install
  1. npm run dev

Index

· Routing configuration

· Redux actions

· Translations

· Utils

· Utils dateFormatter()

· Utils fetch()

· Utils validators

Routing

src/routing.js

  1. import { Router } from '@vaadin/router';
  2. import './views/home-view';
  3. import './views/vaadin-view';
  4. import './views/not-found-view';
  5. export const routing = function() {
  6. const outlet = this.shadowRoot.getElementById('root');
  7. const router = new Router(outlet);
  8. var routes = [
  9. { path: '/', component: 'home-view' },
  10. { path: '/vaadin', component: 'vaadin-view' },
  11. { path: '(.*)', component: 'not-found-view' }
  12. // ...
  13. ];
  14. };

Redux Actions

src/store/actions/notes-actions.js

  1. // Import fetch.config file to improve your performance.
  2. import fetch, { http } from '../fetch.config';
  3. export const addNote = (body) => {
  4. return async(dispatch) => {
  5. const response = await fetch(http.post(body));
  6. if (!response.error) {
  7. dispatch({ type: 'ADD_NOTE', payload: response });
  8. } else {
  9. dispatch({ type: 'CATCH_ERROR', payload: response });
  10. }
  11. };
  12. };

Go to src/store/actions/notes-actions.js to see more examples with GET and DELETE on redux and check src/store/fetch.config.js file to configure your fetch options.

Translations

Config file: assets/translations/index.js

  1. // how tu use
  2. import { locales } from 'assets/translations';
  3. <div>
  4. <h1>${locales.home_title}</h1>
  5. <h3>${locales.home_title_sub}</h3>
  6. <p>${locales.content}</p>
  7. </div>

Utils

dateFormatter()

src/utils/functions.js

Date-formatter allows to customize your own date-formats.
By default some presets are already defined such as default, short and others.

How to use

  1. import { dateFormatter } from 'src/utils/functions';
  2. const date = dateFormatter(Date.now());
  3. console.log(date.default); // "September 7, 2019"
  4. console.log(date.short); // "Sep 7"
  5. console.log(date.day); // "Sunday"
  6. console.log(date.hour); // "15:53"

fetch()

src/store/fetch.config.js

Configure your fetch options and error codes from fetch.config.js file.

  1. // Import fetch.config file to improve your performance.
  2. import fetch, { http } from 'src/store/fetch.config';
  3. import { url } from 'config.js';
  4. const body = {};
  5. // get request
  6. const getExample = await fetch(http.get());
  7. // get request - optional param (api path)
  8. const getExample = await fetch(http.get(), `${url}/notes`);
  9. const postExample = await fetch(http.post(body));
  10. const deleteExample = await fetch(http.delete());

Validation

src/utils/functions.js

loginValidator()
emailValidator()

PWA Configuration

manifest.json

sw.js service-worker

from index.html

  1. <head>
  2. <link rel="manifest" href="/manifest.json">
  3. <link rel="apple-touch-icon" href="/assets/pwa_icons/icon-192-ios.png">
  4. <meta name="theme-color" content="white"/>
  5. <meta name="apple-mobile-web-app-capable" content="yes">
  6. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  7. <meta name="apple-mobile-web-app-title" content="Seed Project">
  8. <meta name="msapplication-TileImage" content="/assets/pwa_icons/icon-144.png">
  9. <meta name="msapplication-TileColor" content="#FFFFFF">
  10. </head>
  1. window.onload = () => {
  2. 'use strict';
  3. if ('serviceWorker' in navigator) {
  4. navigator.serviceWorker.register('./sw.js');
  5. }
  6. };

Seed Server

Node API | Authentication

Seed Catalog

Seed-catalog is a free and open-source web-components library. It contains CSS-styles and standard-web based templates such as buttons, modals, dropdowns and other interface components.

Seed Catalog repository

Documentation

Web Components

Polymer Project

Conventional commits