@matriarx/ui v0.0.2

Matriarx UI

A project template that contains the core essentials for a UI project.

Note - This project is still a work in progress, don't use it in production (yet).

Packages

• typescript
• jest
• eslint
• prettier
• husky
• lint-staged
• express
• socket.io
• supertest
• ts-node-dev
• react
• webpack

Usage

  npx @matriarx/ui 'project'
  cd 'project'
  npm i
  npx husky install bin
  git add bin/pre-commit && git add bin/pre-push

  ...

  npm start // run the SSR server
  npm run build // compile all server files
  npm run bundle // compile and bundle all client files with webpack
  npm run ssg // generate static .html files for UI pages
  npm run deploy // build, bundle, generate and start server
  npm run serve // start development server in watch mode
  npm run dev // start webpack bundle in watch mode
  npm test // run tests
  npm run lint // run eslint
  npm run style // run prettier

• You can build a purely client side react app like you're used to.
• You can build a purely staticly rendered site.
• You can utilize SSR in combination with your client to render pages/components server side, which brings a whole new paradigm of what you can do with microfrontends.
• You can use a combination of all of the above.

During development you can run serve along with dev in order to have both webpack and the server recompile on file changes. Note that on the very first time you run the project you'll need to run build first in order to build things like the webpack.ts file, I don't want to install ts-node just to do that once, but you can also do that if you prefer.

Config

• All of the configurations for typescript, jest, eslint, prettier, husky and lint-staged have already been set up.
• Project root is /src so typescript will search for all source files there, after which it will compile everything to /lib.
• It will automatically lint and style the code on git commit as well as run the tests on git push, if you want to change that you can edit the husky hooks in /bin.
• The coverage tests have a threshold which will fail the tests if you haven't covered majority of the code base, if you want to change that you can edit the percentage values in .jestrc.json.
• The configurations for the server, sockets and webpack has been set up but you can customize and add to that as needed.
• All of the configurations and files are there, there's nothing imported from a black magic location, if you want to change it go ahead.

Performance

• I've deoupled the webpack watcher from the server one so that server file changes will never trigger a webpack rebuild and vice versa, this requires you to run the watch in two different terminals, but it's super fast.
• I've used the existing socket to publish a browser update on webpack compilation, when you change a file the browser will refresh almost before you can even alt + tab to it.
• The webpack compiler is configured to run multicompiler so it will bundle each page in a couple of milliseconds, the speed of the compilation of the pages using SSG is very fast. This will probably still slow down a bit as the UI grows and as I add a bit more functionality in the future, but I've focused a lot on getting all compilations down to a bare minimum.
• The API shows you how you can renderToNodeStream which you can utilize to render .html directly without generating static content.
• The UI shows you an example of how you can hydrate the UI client side in order to save more on performance.
• I've only installed the absolute bare minimum packages that I need in order to get this set up, I've removed webpack-dev-server in order to reuse the same server for production and development, I've used the same websockets for browser refresh on file changes, I've not included anything that isn't strictly needed, i.e. ts-node. I don't like a ton of boilerplate stuff and if it's not too much code to rebuild it I do it myself.

Roadmap

List of things I'm working on:

• I need to move all the (currently) hard coded configurations from webpack, the server and the compiler files to the main config, so that the client/server/dev environment can dynamically load off the main config.
• I need to do a few optimizations, for example currently the server will glob the entire /public directory on each file request to see if the .html for it exists, along with a couple of other similar places where I want to optimize it as much as possible.
• Currently the compiler and the SSG runs on all the routes, I want to make this way more configurable so that the server API routes can compile/SSG any single files or groups of directories depending on what you need. You should be able to specifically tell it what file to bundle and what file to compile and it should be used in a very simple way so it's easy to import and use in API routes.
• I need to sort out the HTML base template and the way the UI is importing components, currently I've just made random components to get it working, however currently you'd need to import the HTML component everywhere if you want to be able to hydrate it. There should be a way that you can load a base template for the HTML and create a lot more reusability in the way it's compiled, without having to redo the same things in every UI page component.
• Overall I want to do a lot more work on the way that you compile, render static content, how you import that into API routes and how the UI renders it, this overall architecture is something I'm still busy with. Right now the ssg/compiler files are very raw and just "working", but there's a lot I still want to do there.
• I still want to sort out the directory structure a bit, currently it builds to public and build, both of which ignored from git commits, I also still want to figure out if I can perhaps create a more intuitive directory structure for the client/server.
• Right now I still need to sort out the dependencies/devdependencies for when you need to run webpack in production using ts-loader to bundle, I've not gotten to everything yet. I also still want to create a proper react app template and remove the random examples I've created.
• There's still a lot of small issues, now and then I update a random tsconfig setting or typescript breaks on a random function type I haven't declared yet, I'm still sorting out small issues along the way.

Contribution

If you have any ideas or suggestions for ways I can improve on this repo you can contact me at mia@matriarx.org. If you find any issues let me know so I can fix it, alternatively feel free to make a PR.

License

MIT.