This library looks towards a good front-end architecture where we do not use components for everything, despite they are great we prefer to divide the front-end in:
- Router is kept away from components (eg:
<Router path="/home">
), we don't think it's a UI responsability. See the example - Resources these are the things you share via
app.set("resource-name", {foo: "bar"})
andapp.get("resource-name")
- Application is the combination of the last two topics
const router = new Appik.Router();
router.route("home", "/", ({app, routeContext}) => {
app.set("message", "Welcome")
});
import {openAppInspector} from "appik/appik-inspector";
import {app} from "./index.ts"
if (process.env.NODE_ENV === "development") {
openAppInspector();
}
By running this code a popup will be opened with our app inspecting tool, be sure to remove it in your production build
Consider starring the repo if it's helpful, That's the way I know you like it
This project comes with:
- _router implementation with lazy loading
- Page implementation with transition
- Redux Implementation
- Form handler helper
- Polyfills for older browsers
- Offline support
- Bundle analyzer report-html
- E2E Testing solution with cypress
Execute the commands bellow to run the application, I personally prefer to use WebStorm for developing, but VSCode (with lit-html plugin) could be used as well. Also I recommend using bash as the terminal
npm install -g yarn
yarn install
yarn start
npm script | description |
---|---|
npm run start | Start and serve the application |
npm run dist | Bundle and optimize |
npm run dist:github | Bundle and optimize application using github.env |
npm run gh-pages | Bundle and optimize... then commit /dist to gh-pages branch |
npm run test | Run tests |
npm run test:headless | Run tests (headless) |
dotenv-webpack was used for managing the environment, files are under src/scripts/enviroment
Files | Description |
---|---|
settings.ts | Exposes environment settings to the application |
local.env | Variables in this file are used in application through process.env.<VARIABLE> (loaded by default) |
*.env | To load other <file>.env instead of local.env set ENVIRONMENT=<file> |
Note: It's possible to use system variables, even if it is not present in *.env
files
Build and run docker image by executing:
docker image build -t polymer-project --build-arg ENVIRONMENT=local .
docker container run -it 80:80 polymer-project
Files are under src/ui-tests
, they are written with testcafe which works like selenium, but don't need to install additional drivers,
also we mock our api by using shmock
Locally run
npm run test:live
Or run docker-compose-test.yml
docker-compose -f docker-compose-test.yml down && docker-compose -f docker-compose-test.yml up --abort-on-container-exit --build -t 30