I thought it would be pretty simple to host a vuejs quasar project in azure static web apps but I cannot even seem to do the build process from github to publish the website. I can do quasar dev and quasar serve locally and all works great. It is just the assets do not seem to load and trigger a build error for pushing to github/azure. My error comes out as follows:
[vite:asset] Could not load /github/workspace/src/assets/imgs/12.jpg (imported by src/components/HomeRecentWork.vue): ENOENT: no such file or directory, open '/github/workspace/src/assets/imgs/12.jpg'
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: Could not load /github/workspace/src/assets/imgs/12.jpg (imported by src/components/HomeRecentWork.vue): ENOENT: no such file or directory, open '/github/workspace/src/assets/imgs/12.jpg'] {
errno: -2,
code: 'PLUGIN_ERROR',
syscall: 'open',
path: '/github/workspace/src/assets/imgs/12.jpg',
pluginCode: 'ENOENT',
plugin: 'vite:asset',
hook: 'load',
watchFiles: [
'/github/workspace/index.html',
'/github/workspace/.quasar/client-entry.js',
'/github/workspace/node_modules/vite/package.json',
'/github/workspace/node_modules/vue/package.json',
'/github/workspace/node_modules/#quasar/extras/package.json',
'/github/workspace/node_modules/quasar/package.json',
'/github/workspace/node_modules/vue/dist/vue.runtime.esm-bundler.js',
'/github/workspace/node_modules/#quasar/extras/fontawesome-v6/fontawesome-v6.css',
'/github/workspace/node_modules/#quasar/extras/roboto-font/roboto-font.css',
'/github/workspace/node_modules/#quasar/extras/material-icons/material-icons.css',
'/github/workspace/node_modules/quasar/dist/quasar.sass',
'/github/workspace/.quasar/app.js',
'/github/workspace/.quasar/quasar-user-options.js',
'/github/workspace/src/css/app.scss',
'/github/workspace/src/boot/axios.js',
'vite/preload-helper',
'/github/workspace/node_modules/#vue/runtime-dom/package.json',
'/github/workspace/node_modules/#vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/vue-plugin.js',
'/github/workspace/src/App.vue',
'/github/workspace/src/stores/index.js',
'/github/workspace/src/router/index.js',
'/github/workspace/node_modules/quasar/src/plugins/Meta.js',
'/github/workspace/node_modules/quasar/src/plugins/Notify.js',
'/github/workspace/node_modules/axios/package.json',
'/github/workspace/node_modules/quasar/wrappers/index.mjs',
'/github/workspace/node_modules/axios/index.js',
'/github/workspace/node_modules/#vue/runtime-core/package.json',
'/github/workspace/node_modules/#vue/shared/package.json',
'/github/workspace/node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js',
'/github/workspace/node_modules/#vue/shared/dist/shared.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/install-quasar.js',
'/github/workspace/node_modules/quasar/src/lang.js',
'/github/workspace/node_modules/quasar/src/icon-set.js',
'plugin-vue:export-helper',
'/github/workspace/node_modules/pinia/package.json',
'/github/workspace/node_modules/pinia/dist/pinia.mjs',
'/github/workspace/node_modules/vue-router/package.json',
'/github/workspace/node_modules/vue-router/dist/vue-router.mjs',
'/github/workspace/src/router/routes.js',
'/github/workspace/node_modules/quasar/src/plugins/Platform.js',
'/github/workspace/node_modules/quasar/src/utils/extend.js',
'/github/workspace/node_modules/quasar/src/components/avatar/QAvatar.js',
'/github/workspace/node_modules/quasar/src/components/icon/QIcon.js',
'/github/workspace/node_modules/quasar/src/components/btn/QBtn.js',
'/github/workspace/node_modules/quasar/src/components/spinner/QSpinner.js',
'/github/workspace/node_modules/quasar/src/utils/private/create.js',
'/github/workspace/node_modules/quasar/src/utils/event.js',
'/github/workspace/node_modules/quasar/src/utils/private/global-nodes.js',
'/github/workspace/node_modules/quasar/src/utils/is.js',
'\x00commonjsHelpers.js',
'/github/workspace/node_modules/axios/lib/axios.js',
'\x00/github/workspace/node_modules/axios/lib/axios.js?commonjs-proxy',
'/github/workspace/node_modules/#vue/reactivity/package.json',
'/github/workspace/node_modules/#vue/reactivity/dist/reactivity.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/plugins/Screen.js',
'/github/workspace/node_modules/quasar/src/plugins/Dark.js',
'/github/workspace/node_modules/quasar/src/history.js',
'/github/workspace/node_modules/quasar/src/body.js',
'/github/workspace/node_modules/quasar/src/utils/private/symbols.js',
'/github/workspace/node_modules/quasar/src/utils/private/global-config.js',
'/github/workspace/node_modules/quasar/src/utils/private/define-reactive-plugin.js',
'/github/workspace/node_modules/quasar/lang/en-US.mjs',
'/github/workspace/node_modules/quasar/src/utils/private/inject-obj-prop.js',
'/github/workspace/node_modules/quasar/icon-set/material-icons.mjs',
'/github/workspace/node_modules/vue-demi/package.json',
'/github/workspace/node_modules/#vue/devtools-api/package.json',
'/github/workspace/node_modules/vue-demi/lib/index.mjs',
'/github/workspace/node_modules/#vue/devtools-api/lib/esm/index.js',
'/github/workspace/src/layouts/MainLayout.vue',
'/github/workspace/src/pages/IndexPage.vue',
'/github/workspace/src/pages/ErrorNotFound.vue',
'/github/workspace/node_modules/quasar/src/composables/private/use-size.js',
'/github/workspace/node_modules/quasar/src/utils/private/render.js',
'/github/workspace/node_modules/quasar/src/directives/Ripple.js',
'/github/workspace/node_modules/quasar/src/components/btn/use-btn.js',
'/github/workspace/node_modules/quasar/src/utils/private/key-composition.js',
'/github/workspace/node_modules/quasar/src/components/spinner/use-spinner.js',
'\x00/github/workspace/node_modules/axios/lib/axios.js?commonjs-module',
'/github/workspace/node_modules/axios/lib/utils.js',
'\x00/github/workspace/node_modules/axios/lib/utils.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/bind.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/bind.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/core/Axios.js',
'\x00/github/workspace/node_modules/axios/lib/core/Axios.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/core/mergeConfig.js',
'\x00/github/workspace/node_modules/axios/lib/core/mergeConfig.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/defaults.js',
'\x00/github/workspace/node_modules/axios/lib/defaults.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/Cancel.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/Cancel.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/CancelToken.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/CancelToken.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/isCancel.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/isCancel.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/spread.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/spread.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/isAxiosError.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/isAxiosError.js?commonjs-proxy',
'/github/workspace/node_modules/quasar/src/utils/debounce.js',
... 128 more items
]
}
Node.js v18.12.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
---End of Oryx build logs---
Oryx has failed to build the solution.
I have not found much info on doing a quasar project inside azure web apps so any advice would be helpful. All the tutorials I have found and gone through do not have these issues and I really do not have a complicated project that deviates from the standard quasar project.
EDIT:
the issue is actually my image paths. I am using with src="~assets/imgs/embroidery.jpg" where ~ must be an alias setup in quasar. Works for components in quasar but not for raw img tags. If i use a relative path like ../assets/imgs/filename.jpg it still draws an error on build. However, if i do /assets/imgs/filename.jpg and put the assets folder in public it works. I dont want to do this however so how should i put the paths for images in my components if not a vue-component per say?
I have successfully compiled my nuxt3 project locally. But the deployment is not working with cloud flare page
00:14:35.140 Executing user command: npm run generate
00:14:35.613
00:14:35.613 > generate
00:14:35.613 > nuxt generate
00:14:35.614
00:14:35.725 Nuxt CLI v3.0.0-rc.3-27567768.c1f728e
00:14:38.919 ✔ Using ~/components/content for components in Markdown
00:14:43.437 ℹ Vite client warmed up in 3072ms
00:14:44.646 ℹ Client built in 4280ms
00:14:44.681 ℹ Building server...
00:14:47.053 ✔ Server built in 2373ms
00:14:47.249 ✔ Generated public dist
00:14:47.249 ℹ Initializing prerenderer
00:14:50.871 ℹ Prerendering 4 initial routes with crawler
00:14:50.891 ├─ / (20ms)
00:14:50.894 ├─ /200 (3ms)
00:14:50.897 ├─ /404 (3ms)
00:14:50.958 ├─ /api/_content/cache (61ms)
00:14:50.971 ✔ You can now deploy .output/public to any static hosting!
00:14:51.017 Finished
00:14:51.018 Note: No functions dir at /functions found. Skipping.
00:14:51.018 Validating asset output directory
00:14:51.018 Error: Output directory ".output/public" not found.
00:14:52.095 Failed: build output directory not found
This is failed with "Error: Output directory ".output/public" not found." but actually the directory is generated few lines before. Any clue to resolve this problem?
I worked around the problem with:
Adding Nitro output config [1] [2] to nuxt.config.ts:
export default defineNuxtConfig({
"nitro": {
"output": {
dir: 'output',
serverDir: 'output/server',
publicDir: 'output/public'
}
}
})
In Cloudflare Pages, setting build output directory to: server/output/public.
I think the issue is caused by the default deployment script at CloudFlare side, checking the existence of .output, but not being able to see "hidden" (starting with dot) folders.
17:27:08.682 Validating asset output directory
17:27:08.682 Error: Output directory ".output/public" not found.
Edit (2022-07-10) found a cleaner way:
add "target" : "static" to nuxt.config.ts
Use as CloudFlare Pages build command: ./node_modules/.bin/nuxt generate
Set CloudFlare Pages build output directory to dist
I also had this issue, after testings, this is what i found.
The documentation says Use the nuxi generate command to build your application. (https://v3.nuxtjs.org/getting-started/deployment#static-hosting).
Configure Node Version
First, i'll add an .nvmrc file at the root of the project, so that Cloudflare doesn't use its default 12.18.0 version on deploy.
The content of the file is :
16
sources:
nuxt 3 prerequisites : https://v3.nuxtjs.org/getting-started/installation/#prerequisites
Node version on Cloudflare Pages : https://developers.cloudflare.com/pages/platform/build-configuration/#language-support-and-tools
Configure the Cloudflare Page
Then i'm adding the configuration in the cloudflare interface with following :
Build command: npx nuxi generate
Build output directory: /.output/public
Root directory: /
🚀
Going further
Actually, it shouldn't be a problem to deploy easily on CF Pages: the team has added a cloudflare_pages preset right into nitro, the server library behind nuxt 3. https://nitro.unjs.io/deploy/providers/cloudflare#cloudflare-pages
I wasn't able to make this preset work for now, i'll update my answer when this has changed :)
V2.6.5
I'm facing a 400 Error bad request when requesting the API after deploying it on Heroku. But I can't figure out why ?
What I did :
Added Procfile in root of /api
Added .htaccess in /api/public (via composer require symfony/apache-pack command)
Defined APP_ENV and DATABASE_URL on Heroku Dashboard app settings
Added the Postegresql addons on Heroku Dashboard
Inside /api folder : git init >> git add . >> git commit -m "..." >> heroku create >> git push heroku master
Sending a GET http request to the /greetings endpoint via postman (response with 400 code error)
This is a brand new api project, I did nothing except the step describe above.
(At first I followed the tutorial in the official api platform documentation using the app.json manifest but it was not taken into account, so I did the configuration in heroku dashboard directly)
On the Procfile, just remove the quotes ''
Before : 'web: heroku-php-apache2 public/'
After : web: heroku-php-apache2 public/
OR
Maybe you should try :
/api/greetings/
Need some advice on this. I have initialize a whole new project by using create-next-app:
npx create-next-app nextjs-app
I was able to start the project by calling npm run dev. This is what i have in the terminal when run on the development server:
ready - started server on http://localhost:3000
However, i get internal server error when navigate to localhost:3000. There is this error on the terminal:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
I am running on node v12.16.3 and npm v6.14.4
Trying to start playing with the Famo.us example. I followed the steps on the Github page and when I do "grunt serve" the browser opens up but with the following errors:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:1337/lib/famous-polyfills/functionPrototypeBind.js
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:1337/lib/famous-polyfills/classList.js
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:1337/lib/famous/core/famous.css
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:1337/lib/famous-polyfills/requestAnimationFrame.js
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:1337/lib/requirejs/require.js
Running it on Windows 7 with Chrome. Any idea how to solve this?
Have you tried running "bower install"? All of those dependencies should be installed by default via bower when you run 'yo famous', but I have seen some instances where it does not.
I would ignore the above advice about cloning via github, there are other dependencies including require.js and almond that would not be installed using that method
Also, as far as minified version is concerned... if you run the "grunt" command you will have a minified, cache busted version of all your dependencies roll for you via require.js / almond. This is better than simply having a minified version of the library as it will only link in modules used.
FWIW I am the author of the tool :D
Based on your comment.. If those files do not exist, you need to make them exist. It is strange the files were not created using the ToolBelt.
Just go to github and grab the files you are missing.
famous/core : https://github.com/Famous/core
famous-polyfills : https://github.com/Famous/polyfills
requirejs: https://github.com/Famous/examples/tree/master/src/lib
** EDIT **
The Author of this tool has submitted a better answer.. Please read TheAlphNerd's response.