I'm testing Nuxt 3 (RC for now), and really love it.
I made a very small front-end application ( no backend, 3 pages, a complex form with some formulas to display some results ).
it works nice locally, there is nothing related to backend, so
I obviously could used only Vue,
but for testing purpose and to go further, I would like to generate a PWA, host it on a dev server ( in a subfolder ) and try to install it on my phone.
It seems nuxt-pwa is not still compatible with nuxt 3,
according to this issue, I've installed kevinmarrec/nuxt-pwa-module,
It works partially ( well.. favion and icons is generated locally )
but I don't know how to configure nuxt.config.js:
the router didn't match the subfolder,
no styles or reactivity is working, I got only my html displayed
I don't even know which command to use : npm run build or generate
I've looked a couple of hours, unsuccesfully, so is there someone knowing some good resources explaining how to turn a Nuxt 3 app into PWA and solve my silly problems
thanks :)
Hey sorry for the late reply, but the API is similar to that of nuxt/pwa meaning configuration from nuxt/pwa will most likely work with the module. To confirm try adding the following pwa config to your nuxt.config.js and check if it works
meta: {
name: 'Demo Site',
description: "Some juicy description",
theme_color: "#dddddd",
},
Note: the name property changes the title of the page. The description adds a meta description tag and the theme_color adds a meta theme-color tag
You can find out more from https://pwa.nuxtjs.org/meta
Any of the commands build or generate will work, but preferably build
Related
I am having a problem using the "Tabs" component: https://material-ui.com/components/tabs/ In fact, when developing locally, the rendering of the component is fine. But pushing to the server, it looks weird (with differences in the borders on each side of the bar).
Moreover: when refreshing the page in which it has been embedded or browsing manually to this page, the whole template is broken all of a sudden!
I tried generating a build folder locally and launching the page from that build, and fell back on the same problem.
Thank you in advance for your help
From your description, I saw that your "build" is not work even in local development. That's mean it should not work on the production, of course.
The thing is, what is your actual "build" action? Depends on what library/framework you use, but basically with Material-UI, most popular problem comes from not load some CSS before using it's components.
Please read here first: https://material-ui.com/guides/server-rendering/#server-rendering
Just in case you use Gatsby, read here: https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/.
I'm using Gatsby and use this following config to fix some CSS issues.
stylesProvider: {
injectFirst: true,
}
Hope this help.
I'm trying to use html2canvas & jsPDF without installing Node.js
(this also because I will add the html pages to a Wordpress site, and want to avoid issues).
While jsPDF offers several "script src url" options,
I see that html2canvas used cdnjs.cloudflare as url only till its version 0.5.0-beta4
(https://cdnjs.com/libraries/html2canvas/0.5.0-beta4).
Looking at latest versions (1.0.0) the Author offers only npm, Yam or local download.
After some research I found that the script is hosted in jsdelivr, open source cdn
(https://www.jsdelivr.com/).
Selecting among several options there is "https://www.jsdelivr.com/package/npm/html2canvas"
where f.e. (among options) you can include:
<script src:"https://cdn.jsdelivr.net/npm/html2canvas#1.0.0-alpha.12/dist/npm/index.js"></script>
or for multiple you can apply the suggested code:
[](https://www.jsdelivr.com/package/npm/html2canvas)
I'm rying to use this system, but not sure if I am really including the whole package or not
(there are many issues:
since html2canvas combined with jsPDF is a scipt "in progress", I don't understand when the
issues depend on some my mistake or on real issues).
Can s/one help me comforting the jsdelivr/npm solution? Do I include all with "index.js"?
Thank you in advance.
I'm interested in using Hot Module Replacement with a newly created React app.
Facebook Incubator's create-react-app uses Webpack 2 which can be configured to support HMR, however in order to do so, one needs to "eject" the create-react-app project.
As the documentation points out, this is a "one way" operation and cannot be reversed.
If I'm to do this, I want to know what I might be giving up. I've been unable to locate any documentation that explains the potential drawbacks of ejecting.
The current configuration allows your project to get updates from create-react-app core team. Once you eject you no longer get this.
It's kind of like pulling in bootstrap css via CDN as opposed to downloading the source code and injecting it directly into your project.
If you want more control over your webpack, there are ways to configure/customize it without ejecting:
https://www.npmjs.com/package/custom-react-scripts
I'm trying to merge large existing web app into sails.js. so I moved the folders into assets and build a custom route , 'GET /': '/assets/client/launch.html' and get 404 when I point my browser to http://localhost:1337/ as the / is correctly redirected to http://localhost:1337/assets/client/launch.html which produces the 404.
Now the file exists in the folder assets/client (and in .tmp), so I am thinking the Sails router is getting in the way.
I would leave the client (70K lines of JS) that generates all the UI dynamically and sailjs server that provides authentication separate and enable CORS but my customer wants client packaged with server. This type of operation is simple in frameworks like ASP.NET MVC but am wondering if Sails is up to the task.
Well, If everything you tried did not work out. There might be another solution ,
First of all since you are talking about sails app I am assuming other bundle must be sails as well ,
So here is what you do-
Change the port for another app that you want to attach to this.
Second whenever you want to go to page on another app simply redirect the client to another port ie
in html or esp put a href tag with different port.
<a href="localhost:PORT/route_to_file">
</a>
I got it working by placing my app into assets where we need to launch from assets/client/index.html as there would be too many dependencies to change. As I said above could not just add a route as Sails must getting in the way. However as in Chapter 3.2.2 of Sails in Action I generated a static asset npm install sails-generate-static --save. then I redirected to assets/client/index.html. As an aside that book is great and would highly recommend it.
I've created a basic application (virtually no content, just a blank page) to test the SSO functionality. It doesn't work, when I test on the TV it gives the error error_cp_001.
The config.xml contains, among other things:
<cpauthjs>Authorization8888.js</cpauthjs>
<login>y</login>
The Authorization8888.js file contains:
var Authorization8888 = {};
Authorization8888.checkAccount = function(id, pw, cb) {
cb("TRUE");
};
I have already tried with <cpauthjs>Authorization8888</cpauthjs>. I have also tried with Authorization without 8888 for the filename and vars. It always shows that error.
I also tried in the SDK simulator, same error as on the real TV. On the simulator I see these extra debug lines:
[JS ALERT]: ####################22222eval(accountCheckFunc) error
[JS ALERT]: Fail to load Account check moudule.
Error : Can't find variable: Authorization8888
I can share the zip file containing the whole application, but it's really simple to reproduce since it has nothing except this basic SSO-related code.
I found the answer, posting it in case someone else hits the same problem.
The problem was deploying via USB. Apparently, an application deployed with the USB stick has limited functionality. Deploying the application via a web server fixed a lot of issues, including this one.