feat(blank-app): initialize new blank app with Nimbus, Vite & TS #94
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ipt setup - Added package.json and pnpm-lock.yaml for dependency management. - Created initial app structure including index.html, main.tsx, and App component. - Implemented CocoCube component and integrated Nimbus provider. - Configured TypeScript with appropriate settings in tsconfig files. - Added .gitignore to exclude unnecessary files. - Included README.md with setup instructions and ESLint configuration guidance.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
misama-ct
commented
May 5, 2025
| @@ -3,7 +3,7 @@ | |||
| "private": true, | |||
| "workspaces": [ | |||
| "packages/*", | |||
| "apps/docs" | |||
| "apps/*" | |||
There was a problem hiding this comment.
every folder inside the apps folder is treated as workspace now.
apps/blank-app/public/cococube.svg
Outdated
There was a problem hiding this comment.
Not necessary, but the public folder is copied as-is when bundling with vite, static assets like font's can go here. (Unfortunately though, an empty folder can't be committed, so I put the cube svg image in it.)
Comment on lines
+8
to
+10
| <NimbusProvider> | ||
| <App /> | ||
| </NimbusProvider> |
There was a problem hiding this comment.
- This is how Nimbus is set up, everything that needs access to Nimbus components and tokens needs to be wrapped with the
NimbusProvidercomponent.
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> |
There was a problem hiding this comment.
- If you are unfamiliar with
vite, this file is the entry point, in this case, an html file that is being rendered in the browser. Vite will start here and attempt to resolve every reference to a file. The only reference in here though is the link tomain.tsxvia the script-tag.
There was a problem hiding this comment.
- This is the actual app. The
main.tsxfile wrapped it with theNimbusProvidercomponent already, and to prove the app has access to components, tokens, icons and mode, I added a bit of functionality.
misama-ct
requested review from
a team,
stephsprinkle,
jaikamat,
ddouglasz,
valoriecarli,
tylermorrisford and
ByronDWall
and removed request for
a team
ByronDWall
approved these changes
May 8, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In preparation for the upcoming speed-test task, I thought it's a good idea to have a basic app-template at hand which can be used as starting ground for an app that is using Nimbus.
This is the process to create a new app, also documented in the
README.mdfile:Creating a New App
To create a new application (e.g.,
fancy-app) based on this template, followthese steps:
blank-appdirectory within theappsdirectory.kebab-case (e.g.,
fancy-app).package.json: Open thepackage.jsonfile inside your new appfolder (e.g.,
apps/fancy-app/package.json) and change thenamepropertyto match your folder name (e.g.,
"name": "fancy-app").pnpm installfrom the root directory of therepository. This will install dependencies for all workspaces, including
your new app.
folder (e.g.,
cd apps/fancy-app).pnpm devto start the Vitedevelopment server for your application.
Note
This template is based on Vite's
react-swc-tstemplate with minoradjustments:
package.jsonincludes references to Nimbus catalog dependencies.root-level ESLint configuration is already present in the repository.