This package is auto-updated.
Last update: 2021-11-06 19:06:03 UTC
Musora UI is a tool for prototyping, building, and testing the front end (HTML/JS/Blade) for projects.
First you need to build all the nessecary files, build command docs WIP
npm adduser- follow on screen instructions using the 'musora_dev' npmjs 1pass entry
git config --global user.name "your-username"- configure local git
git config --global user.email "your-email"- configure local git
npm version patch- increase the npm version by 1
npm publish- publish new version to npmjs
cd /app/musora-ui- navigate to this packages root
npm link- add musora-ui to npms global list of packages that can be symlinked locally
cd /app/drumeo/laravel- navigate to the repo you want to symlink musora-ui to (may need to change path)
npm link musora-ui- create the symlink
- Ensure your railenvironment repository and docker build are up to date.
- In manager container, run: r setup musora-ui
- Navigate to: /app/musora-ui
- Run: npm install
- Run: npm run BUILD_COMMAND
- Run: r musora-ui composer install
You can view the different npm build commands inside the root package.json file. An example is: npm run build-drumeo-dev
The /public folder of this repository is hosted on your local machine under URL:
You can automatically render any blade file using the url. /blade tells the request to render a blade template at the path after /blade relative to the blade folder in the project. For example:
Will render the blade file at: blade/ui.blade.php
Will render the blade file at: blade/core/text-input.blade.php
Musora UI is for prototyping in pure HTML and css, which can be reviewed and go through QA before being put in a regular project such as a laravel project.
All pages inside Musora UI should be statically linked using relative linking in the href tags.
Please create a new branch in this repository when starting a new prototype or starting a new version of an existing one. Please also separate the prototypes by brands using the folder structure.
Feel free to add new build commands and custom tailwind configs. We can also integrate VueJS, but it has not been setup yet.
We highly recommend using the Sizzy browser to develop and preview html pages (license in 1pass):
You can also use our own internal preview tool here:
Tailwind CSS is the front end framework that Musora UI uses, it is already installed and configured. You can find
the tailwind docs here:
If you are new to tailwind css we highly recommend watching this video series (the other ones in there are great too):
This is an amazing list of front end development resources:
A good list of tailwind css specific plugins and tools:
We may end up purchasing this UI kit for tailwind:
If you think it could be of use let Caleb know!