Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/robisim74/static-web-app
Build a static web app with Webpack, Babel, TypeScript or ES6, critical CSS, differential loading & Web Components. SEO & performance friendly
https://github.com/robisim74/static-web-app
babel critical-css differential-loading es6 typescript web-components webpack
Last synced: about 1 month ago
JSON representation
Build a static web app with Webpack, Babel, TypeScript or ES6, critical CSS, differential loading & Web Components. SEO & performance friendly
- Host: GitHub
- URL: https://github.com/robisim74/static-web-app
- Owner: robisim74
- License: mit
- Created: 2020-07-17T14:07:33.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-29T14:59:11.000Z (over 2 years ago)
- Last Synced: 2024-04-17T07:48:32.304Z (10 months ago)
- Topics: babel, critical-css, differential-loading, es6, typescript, web-components, webpack
- Language: JavaScript
- Homepage: https://robisim74.github.io/static-web-app/
- Size: 832 KB
- Stars: 3
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Static Web App
> Build a static web app with Webpack, Babel, TypeScript or ES6, critical CSS, differential loading & Web Components. SEO & performance friendly
[Live example]( https://robisim74.github.io/static-web-app/)
## Features
* _Babel_ & _webpack_
* _TypeScript_ & ES6
* CSS, _SASS_ & _Autoprefixer_
* _ESLint_
* Critical CSS
* Differential loading
* One page or Multi page
* Web Components
* Sitemap
* End-to-end testing with _Cypress_
## Contents
* [Getting started](#1)
* [Project structure](#2)
* [What's new](#3)
## Getting started
Download the code & configure the project in `config.js` file.
### Installation
For development, _Node.js_ 12 or higher is required.
```Shell
npm install
```
### Start DevServer
```Shell
npm start
```
### Test
```Shell
npm test
```
### Build
```Shell
npm run build
```
## Project structure
- Site
- **src/** source code folder
- **config.js** app configuration
- Scripts & configuration files
- **build.js** building process
- runs _webpack_ to generate es2015 bundles
- runs _webpack_ to generate es5 bundles
- runs _critical_ to inline critical CSS
- runs _sitemap_ to generate `sitemap.xml`
- **scripts/** scripts used by the building process
- **babel.config.js** _Babel_ configuration
- _modern_ env for development & production (es2015)
- _legacy_ env for production (es5)
- **webpack.config.dev.js** _webpack_ configuration for development
- **webpack.config.prod.js** _webpack_ configurations for building es2015 & es5 bundles
- **.browserslistrc** target browsers for es5 bundles & _Autoprefixer_
- **postcss.config.js** _PostCSS_ configuration file to use _Autoprefixer_
- **.eslintrc.js** _ESLint_ configuration file
- **tsconfig** _TypeScript_ configuration file
- **package.json** _npm_ options & scripts
- Testing:
- **cypress/** _Cypress_ folder with test files
- **cypress.json** _Cypress_ configuration file
## What's new
You can find template changes [here](https://github.com/robisim74/static-web-app/releases).
## License
MIT