shyam-chen / vue-starter Goto Github PK
View Code? Open in Web Editor NEW:poodle: A boilerplate for web applications with Vue and Tailwind using TypeScript on Vite.
Home Page: https://vue-starter-6fa6.onrender.com
vue-starter's Issues
Upgrade to Webpack 5
Migrating from Heroku to Firebase Functions
Need to rename server.js to index.js.
Aggressive Splitting
References:
Automatically build images and push to Docker Cloud
Protecting environmental variables
# .gitignore
.DS_Store
node_modules
npm
public
functions
coverage
+ Dockerfile.dev
+ Dockerfile.prod
*.logGet from a private image
# docker-compose.yml
<dev|prod>:
- image: <dev|prod>
- build:
- context: .
- dockerfile: tools/Dockerfile.<dev|prod>
+ image: <DOCKER_ID_USER>/<IMAGE_NAME>:<IMAGE_TAG>
volumes:
- yarn:/home/node/.cache/yarn
tty: trueBuild images and push to Docker Cloud
# release.sh
#!/bin/sh
set -e
echo "Q1. ENV?"
read ENV
echo "Q2. IMAGE_NAME?"
read IMAGE_NAME
echo "Q3. IMAGE_TAG?"
read IMAGE_TAG
echo "Q4. DOCKER_ID_USER?"
read DOCKER_ID_USER
docker build -f tools/Dockerfile.$ENV -t $IMAGE_NAME:$IMAGE_TAG .
docker tag $IMAGE_NAME:$IMAGE_TAG $DOCKER_ID_USER/$IMAGE_NAME:$IMAGE_TAG
docker push $DOCKER_ID_USER/$IMAGE_NAME:$IMAGE_TAGGenerate a blank project via Vue CLI
Vue Fullstack Starter is for practical examples.
$ yarn global add vue-cli
$ vue init Shyam-Chen/Vue-Fullstack-Template <PROJECT_NAME>
$ cd <PROJECT_NAME>
$ yarn install
# start
$ yarn start:app
$ yarn start:apiXML Sitemaps
Declare default environment variables in file
Ues .env
env.js
UI documentation
References:
Microservices on the Front-end
Progressive Web App
References:
First install, mock starting error
Fresh clone repository, on Windows 11 system
- pnpm i
- pnpm dev
- pnpm mock
Error:
> @ mock PS D:\labs\Vue-Starter>
> cd mock && pnpm mock
> vite
VITE v5.1.3 ready in 271 ms
➜ Local: http://127.0.0.1:3000/
➜ press h + enter to show help
11:51:34 [vite] warning:
virtual:fastify-routes
2 | export default (app, opts) => {
3 | const { prefix } = opts;
4 | app.register(async (app) => {app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\+handler.ts'), { prefix: prefix + '/user-list' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\+handler.ts'), { prefix: prefix + '/todos' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\suggestions\+handler.ts'), { prefix: prefix + '/suggestions' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\[id]\+handler.ts'), { prefix: prefix + '/user-list/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\[id]\+handler.ts'), { prefix: prefix + '/todos/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\user\+handler.ts'), { prefix: prefix + '/auth/user' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\sign-in\+handler.ts'), { prefix: prefix + '/auth/sign-in' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\otp\validate\+handler.ts'), { prefix: prefix + '/auth/otp/validate' });});
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 | };
6 |
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
Plugin: vite:import-analysis
File: virtual:fastify-routes
11:51:34 [vite] warning:
virtual:fastify-routes
2 | export default (app, opts) => {
3 | const { prefix } = opts;
4 | app.register(async (app) => {app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\+handler.ts'), { prefix: prefix + '/user-list' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\+handler.ts'), { prefix: prefix + '/todos' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\suggestions\+handler.ts'), { prefix: prefix + '/suggestions' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\[id]\+handler.ts'), { prefix: prefix + '/user-list/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\[id]\+handler.ts'), { prefix: prefix + '/todos/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\user\+handler.ts'), { prefix: prefix + '/auth/user' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\sign-in\+handler.ts'), { prefix: prefix + '/auth/sign-in' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\otp\validate\+handler.ts'), { prefix: prefix + '/auth/otp/validate' });});
|
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 | };
6 |
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
Plugin: vite:import-analysis
File: virtual:fastify-routes
11:51:34 [vite] warning:
virtual:fastify-routes
2 | export default (app, opts) => {
3 | const { prefix } = opts;
4 | app.register(async (app) => {app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\+handler.ts'), { prefix: prefix + '/user-list' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\+handler.ts'), { prefix: prefix + '/todos' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\suggestions\+handler.ts'), { prefix: prefix + '/suggestions' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\user-list\[id]\+handler.ts'), { prefix: prefix + '/user-list/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\todos\[id]\+handler.ts'), { prefix: prefix + '/todos/:id' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\user\+handler.ts'), { prefix: prefix + '/auth/user' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\sign-in\+handler.ts'), { prefix: prefix + '/auth/sign-in' });app.register(import('D:\labs\Vue-Starter\mock\src\routes\auth\otp\validate\+handler.ts'), { prefix: prefix + '/auth/otp/validate' });});
|
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
5 | };
6 |
The above dynamic import cannot be analyzed by Vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
Plugin: vite:import-analysis
File: virtual:fastify-routes
11:51:34 [vite] Pre-transform error: Bad character escape sequence, expected 4 hex characters
11:51:34 [vite] Error when evaluating SSR module /src/plugins/router.ts: failed to import "virtual:fastify-routes"
|- RollupError: Bad character escape sequence, expected 4 hex characters
at getRollupEror (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
at convertProgram (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:1012:26)
at parseAstAsync (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:2158:12)
at async ssrTransformScript (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:54036:15)
at async loadAndTransform (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:53632:11)
11:51:34 [vite] Error when evaluating SSR module D:\labs\Vue-Starter\mock\src\app.ts: failed to import "/src/plugins/router.ts"
|- RollupError: Bad character escape sequence, expected 4 hex characters
at getRollupEror (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
at convertProgram (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:1012:26)
at parseAstAsync (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:2158:12)
at async ssrTransformScript (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:54036:15)
at async loadAndTransform (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:53632:11)
node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^
Error [RollupError]: Bad character escape sequence, expected 4 hex characters
at getRollupEror (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
at convertProgram (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:1012:26)
at parseAstAsync (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:2158:12)
at async ssrTransformScript (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:54036:15)
at async loadAndTransform (file:///D:/_LAB/labs/Vue-Starter/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-stQc5rCc.js:53632:11) {
code: 'PARSE_ERROR',
pos: 155
}
Node.js v20.7.0
ELIFECYCLE Command failed with exit code 1.
ELIFECYCLE Command failed with exit code 1.
PS D:\labs\Vue-Starter>
Remove libraries that are no longer in use
Remove unused CSS
References:
Modular translation
ref #19
Error Tracking
User Analytics
GraphQL Server
Pre-rendering pages for SEO
When I refresh the page, I get a 404 error.
Hello, I'm currently facing an issue with your project. After running "pnpm build" and placing the resulting "dist" files into nginx, I noticed that whenever I refresh the page, I get a 404 error. I'm not sure which step I may have missed in the setup. I would appreciate your response. Thank you very much.
Viewing the page on browser
Hey @Shyam-Chen after running yarn start:app and yarn start:api, how do I get this to run on my browser, or how does this work?
Lighthouse Test is 0 performance - everything else >= 91
lighthouse tested the prod-mode link. Does any one has different result?
Convert external stylesheets into style elements
Modular routing
Optimize Internationalization
Lazy loading - Splitting different languages for feature modules
Admin dashboard template
Features:
- Dashboard
- Auth
- Permission
- Page
- Role
- Page Loading Bar
Failed to resolve import +layout.vue file
Hello, last time I received your assistance, and I'm very grateful for that.
Currently, one of my colleagues has joined the development team, but he's using Windows 11 for development.
He's encountering an issue where, every time he runs 'pnpm dev' and opens the browser, he encounters the following error.
I've tried several times but haven't been able to resolve it.
So, I decided to directly download the project you have on GitHub and ran 'pnpm i' and 'pnpm dev.'
Unfortunately, we still face the same error.
Have you come across a similar issue or do you know how to resolve this problem?
I'm sorry to trouble you again, and thank you.
[vite] Internal server error: Failed to resolve import "src/routes/(portal)/+layout.vue" from "virtual:vue-routes". Does the file exist?
Plugin: vite:import-analysis
File: virtual:vue-routes:4:31
2 | {
3 | "path": "src/routes/+",
4 | "component": () => import('src/routes/(portal)/+layout.vue'),
| ^
5 | "children": [
6 | {
at formatError (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44062:46)
at TransformContext.error (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44058:19)
at normalizeUrl (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41844:33)
at async file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41998:47
at async Promise.all (index 0)
at async TransformContext.transform (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:41914:13)
at async Object.transform (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:44352:30)
at async loadAndTransform (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:55026:29)
at async viteTransformMiddleware (file:///E:/codespaces/Vue-Starter/node_modules/.pnpm/vite@4.5.0_@types[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-bb8a8339.js:64430:32) (x5)
Build functions with Gulp
Store and view images on Firebase Storage
Docker Cloud
Performance
Accessibility
Run Functions Locally
A La Carte (Vuetify)
Docker secrets
Migrate from vue-material to vuetify
SEO
References:
`firebase serve --only functions --token $FIREBASE_TOKEN` fails with TypeError in container
firebase/firebase-tools#364
firebase/firebase-tools#647
firebase/firebase-tools#787
yarn run v1.6.0
$ firebase serve --only functions --port 5000 --token $FIREBASE_TOKEN
=== Serving from '/Vue-Fullstack-Starter'...
i functions: Preparing to emulate functions.
Warning: You're using Node.js v8.11.3 but Google Cloud Functions only supports v6.11.5.
error: /Vue-Fullstack-Starter/node_modules/firebase-admin/lib/auth/credential.js:94
throw new error_1.FirebaseAppError(error_1.AppErrorCodes.INVALID_CREDENTIAL, 'Failed to parse refresh token file: ' + error);
^
Error: Failed to parse refresh token file: Error: Refresh token must contain a "refresh_token" property.Accelerated Mobile Pages
Setup Dev Server
Prerenders static HTML
Switch to #18
Upgrade to Babel 7
Server-side rendering
Incorrect Display of Select Options within Popover Component
Description
When the Select component is nested within the Popover component, there is a display issue where the options dropdown appears misaligned. This misalignment occurs due to the improper calculation of the top position, failing to account for the offset of the parent element.
Steps to Reproduce:
- Create a Popover component.
- Embed a Select component within the Popover.
- Trigger the Popover to display.
- Observe the misalignment of the options dropdown within the Select component.
Expected Behavior:
The options dropdown within the Select component should align properly within the boundaries of the Popover, considering the offset of the parent element.
Additional Information:
This issue affects the usability and aesthetics of components utilizing both Select and Popover functionalities. Proper alignment is crucial for a seamless user experience.
Lazy Loading
References:
Database support
any idea you can borrow from Sequelize (supports MySQL, Postgres, Sqlite and MSSQL) https://github.com/atulmy/fullstack-graphql
API documentation
Automated UI testing with Playwright
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.