Lightweight web application based on web-components.
Lightweight web application based on web-components.
_ assets\
|
| images\
| |
| backgrounds\
|
| pwa_icons\
|
| translations\
|
| flags\
| scripts\
|
| utils\
|_ src\
|_ components\
|_ middleware\
| store\
|
| actions\
|
|_ reducers\
|_ utils\
|_ views
Link: https://seed-project.dev/
git clone https://github.com/vicdata4/seed.git
config.js
file from root to specify your host address
and token prefix
as below.
export const prefix = 'prefix-string';
export const url = 'http://your-host-address';
npm install
npm run dev
import { Router } from '@vaadin/router';
import './views/home-view';
import './views/vaadin-view';
import './views/not-found-view';
export const routing = function() {
const outlet = this.shadowRoot.getElementById('root');
const router = new Router(outlet);
var routes = [
{ path: '/', component: 'home-view' },
{ path: '/vaadin', component: 'vaadin-view' },
{ path: '(.*)', component: 'not-found-view' }
// ...
];
};
// Import fetch.config file to improve your performance.
import fetch, { http } from '../fetch.config';
export const addNote = (body) => {
return async(dispatch) => {
const response = await fetch(http.post(body));
if (!response.error) {
dispatch({ type: 'ADD_NOTE', payload: response });
} else {
dispatch({ type: 'CATCH_ERROR', payload: response });
}
};
};
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.
// how tu use
import { locales } from 'assets/translations';
<div>
<h1>${locales.home_title}</h1>
<h3>${locales.home_title_sub}</h3>
<p>${locales.content}</p>
</div>
dateFormatter()
Date-formatter allows to customize your own date-formats.
By default some presets are already defined such as default
, short
and others.
import { dateFormatter } from 'src/utils/functions';
const date = dateFormatter(Date.now());
console.log(date.default); // "September 7, 2019"
console.log(date.short); // "Sep 7"
console.log(date.day); // "Sunday"
console.log(date.hour); // "15:53"
fetch()
Configure your fetch options and error codes from fetch.config.js
file.
// Import fetch.config file to improve your performance.
import fetch, { http } from 'src/store/fetch.config';
import { url } from 'config.js';
const body = {};
// get request
const getExample = await fetch(http.get());
// get request - optional param (api path)
const getExample = await fetch(http.get(), `${url}/notes`);
const postExample = await fetch(http.post(body));
const deleteExample = await fetch(http.delete());
loginValidator()
emailValidator()
sw.js service-worker
from index.html
<head>
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/assets/pwa_icons/icon-192-ios.png">
<meta name="theme-color" content="white"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Seed Project">
<meta name="msapplication-TileImage" content="/assets/pwa_icons/icon-144.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
</head>
window.onload = () => {
'use strict';
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js');
}
};
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.