This is home page of my site. It was created as starting point for my other projects. So you can find here a lot of excessive and unused details for current project but they can be useful for yours.
- Main code are based on Vue framework 2.5.*
- All site code and build configurations wrote on TypeScript 2.8.*
- TSLint rules for all scripts
- For storing date the site uses on Vuex 3.0.*
- Server Side Rendering (SSR) based on vue-ssr
- Vue Router for site routing
- Supporting React like render functions inside *.tsx and *.vue files
- Using Babel 7 for effective code transpilation to ES5.
- Using Bootstrap 4 as style framework with SASS compilation and modifications via sass variables.
- Using Font Awesome 5 for site icons.
- Generating site favicons for all popular platforms on build
- Using WorkBox 3 tools for working with Service Worker features
- Using Server Side Component Cache
- Run client side tests on Karma
- Generate test coverage report by Istanbul project
- Multilanguage supporting (please see notes bellow)
- Supporting Docker container as build destination
Provided way for multilanguage supportng is not common and shouldn't be used for site with many languages. But if you have only 2 or 3 languages you can follow by this way.
You can mark language relative part of you template (doesn't matter vue or react) by lang attribute:
<div>
<span lang="ru">Это русский текст</span>
<span lang="en">It is English text</span>
<div>Webpack loader just remove all tags with not current text, so at the result you receive for lang='en':
<div>
<span lang="en">It is English text</span>
<div>And for lang='ru':
<div>
<span lang="ru">Это русский текст</span>
<div>In this case Webpack creates two different packages for each language.
Also you can set translation in any places outside html elements. It can be html attributes or javascript variables:
<div>
<input name="name" placeholder="$lang-en(Your name)$lang-ru(Ваше имя)"/>
<div>class MyComponent {
public userText = '$lang-en(Warning)$lang-ru(Внимание)';
}# install dependencies
yarn install
# build client and server side in watch mode, run server on 8080 port with SSR
yarn dev
# run all Karma tests
yarn test
# run all Karma tests in watch mode
yarn test:watch
# run the test suite and generate a coverage report
yarn run coverage
# Run the tests and build the site in production mode
yarn build
# clean the production build
yarn clean