How to deploy web app with nuxt firebase? - javascript

I have installed the nuxt firebase plugin into my web app and when I serve the generated folder (dist) locally, it runs perfectly. But when I deploy it to the server, my web app doesnt even recognize any nuxt firebase command and causes an error like this.
Did I miss a configuration or something?
Here is the code to get the token
let currentToken;
try {
const permission = await Notification.requestPermission()
currentToken = await this.$fire.messaging.getToken();
//console.log(currentToken);
this.model.DeviceToken = currentToken;
} catch (e) {
console.error('An error occurred while retrieving token. ', e);
}

I had a similar issue not too long ago. Double-check your firebase.json file. to ensure that when you are using the CLI it is set up to rewrite everything to index.html. It should look like this
{
"hosting": {
"public": "./dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html" <------
}
]
}
}
If that does not work you can try removing ServerMiddleware from nuxt.config.js and implementing it in its own module, as demonstrated in this answer

Related

Azure Function with Node.js can't access SQL database: Entry point problem?

I am trying to connect an Azure Function to a SQL-Database that I also created in Azure. Sounds pretty simple and Microsoft even has a pretty good POC tutorial for it. However, in my case the Azure Function is dropping "entryPoint" errors that I am not able to resolve.
I checked some other stackoverflow discussions (Can't connect Node.js server to Azure SQL Database) and googled the hell out of it. Unfortunately it seems like none of this is helping. I updated the "function.json" to set my entryPoint as shown below.
{
"bindings": [
{
"authLevel": "function",
"type": "httpTrigger",
"direction": "in",
"access": "listen",
"name": "req",
"methods": [
"get",
"post"
]
},
{
"type": "http",
"entryPoint": "index",
"direction": "out",
"name": "res"
}
]
}
My index.js code is a very trivial try to connect to the database and tell me about the success.
var Connection = require('tedious').Connection;
var config = {
userName: 'XXXX',
password: 'XXXX!',
server: 'XXXX.database.windows.net',
// If you are on Microsoft Azure, you need this:
options: {encrypt: true, database: 'XXXXX'}
};
var connection = new Connection(config);
connection.on('connect', function(err) {
// If no error, then good to proceed.
console.log("Connected");
});
Normally this should connect to the database and print a "Connected" to the console but somehow it shows this error:
[Error] Executed 'Functions.TediousTest' (Failed, Id=XXXXXXX)
node exited with code 1
[error] Worker was unable to load function TediousTest: 'Unable to determine function entry point. If multiple functions are exported, you must indicate the entry point, either by naming it 'run' or 'index', or by naming it explicitly via the 'entryPoint' metadata property.',[error] Worker XXXXXX uncaught exception: ReferenceError: executeStatement is not defined
Hopefully this is enough information to understand my problem. The database has no special firewall etc. at the moment. Besides it seems like the code snippet isn't even able to get in touch with the firewall. Thanks in advance.
I believe you haven't exported your function properly based on the error message - basically missed the module.exports line.
I guess your code looks something like this
...
async function TediousTest() {
...
}
If so, just add this line to the end
module.exports = TediousTest;

Converting Angular 4 App to PWA

I've set some routing rules in ngsw-manifest.json as shown below. Problem is when I'm running a http-server and directly hitting http://localhost:8080/home it's showing url not found.
{
"static.ignore": [
"^\/assets\/ignore.*$"
],
"routing": {
"index": "/index.html",
"routes": {
"/": {
"match": "exact"
},
"/home": {
"match": "exact"
},
"/listing/must_watch_videos": {
"match": "exact"
},
"^/regex/.*/route$": {
"match": "regex"
}
}
},
"external": {
"urls": [
{
"url": "https://fonts.googleapis.com/css?family=Material+Icons"
}
]
}
}
When someone requests /home your server can't find a file or folder with that name and returns error 404. You need your server to instead server your main app .html as though it resides at those locations.
For node http-server it looks like the option would be --spa. For example:
ws --spa index.html
Single Page Application
Serving a Single Page Application (an app with
client-side routing, e.g. a React or Angular app) is as trivial as
specifying the name of your single page:
$ ws --spa index.html Serving at http://mbp.local:8000,
http://127.0.0.1:8000, http://192.168.0.100:8000 By default, requests
for typical SPA paths (e.g. /user/1, /login) return 404 Not Found as a
file at that location does not exist. By marking index.html as the SPA
you create this rule:
If a static file is requested (e.g. /css/style.css) then serve it, if
not (e.g. /login) then serve the specified SPA and handle the route
client-side.
See: https://www.npmjs.com/package/local-web-server#single-page-application
See: https://github.com/lwsjs/local-web-server/wiki/How-to-serve-a-Single-Page-Application-(SPA)

Uncaught SyntaxError: Identifier 'baseUrl' has already been declared

I have a Polymer webapp deployed using Firebase hosting.
The routing between views works but the error page handling is not.
I have succeeded to reproduce the issue on a minimal example using the official polymer-2-starter-kit example:
https://fir-polymer-404-issue.firebaseapp.com/
For instance, if you open the following URL, the error page is not displayed:
https://fir-polymer-404-issue.firebaseapp.com/not-existing
Instead, I get the error below:
my-not-existing.html:56 Uncaught SyntaxError: Identifier 'baseUrl' has already been declared
at my-not-existing.html:56
(anonymous) # my-not-existing.html:56
The configuration file firebase.json used for the previous example is here:
{
"hosting": {
"public": ".",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I would like to have the error page handling made by Polymer.
Please note that the same app served by polymer serve works properly.
It seems the problem comes from the Firebase hosting configuration. All traffic is redirected to index.html so when Polymer load a not-existing page, the Firebase server returns an HTTP 200 response. Unfortunately, I have no idea how to fix the problem.
I have tried to create a redirection for non-404 responses only with the following configuration file:
{
"hosting": {
"public": ".",
"redirects": [
{
"source": "**",
"destination": "/index.html",
"type": 200
}
]
}
}
Unfortunately, the type property can be used for 3xx code only:
Error: HTTP Error: 400, hosting.redirects[0].type is not one of enum values: 301,302,303,304,305,307,308
Please also note that a custom 404.html file is placed at the root.
The only solution I see is to list all existing routes (per file) but it looks just crazy.
Any idea is welcome.
The reason neither firebase or polymer is going to handle your 404 page is that when you request a non-existing page, it's not only going to return with the status code 200 but it's also going to return with the HTML of the index page, so it will display something, although that something is really nothing.
Now the way polymer is set up it looks for views in the src folder, so you want a rewrite just on the root and not in the src folder. So change your firebase.json to be
{
"hosting": {
"public": ".",
"rewrites": [{
"source": "/*",
"destination": "/index.html"
}]
}
}
The single * will mean files but not subfolders, this will allow your routeing to work if you enter it in the address bar but if the page is not found the 404 will be handled by polymers routeing. I've set up a firebase application using the polymer starter pack to for an example.
https://testforsoissue.firebaseapp.com/view2
Will work and will take you to view2 as the initial request will be rewritten to return index.html but the request for /src/my-view2.html will not
Whereas a route that is not defined
https://testforsoissue.firebaseapp.com/not-existing
Will throw a 404 (in polymer) as the initial request will again be rewritten to return index.html but the request for /src/my-not-existing.html will not and will happily throw a 404!
P.S. the reason for the error 'baseUrl' has already been declared' is due to the fact the page was using the index.html twice which declares the baseUrl at the top
Edit
If you have subpaths seems like you can use the firebase.json like so
{
"hosting": {
"public": ".",
"rewrites": [{
"source": "!/src/*",
"destination": "/index.html"
}]
}
}
As per documentation, you do not need to do the handling; just create a 404.html:
You can specify a custom 404/Not Found error to be served when a user tries to access a page that does not exist. Simply add a 404.html page to the your project's public directory and the contents of this page will be displayed when Firebase Hosting needs to display a 404 Not Found error to the user.
To avoid the baseUrl error, if you have access to this line of code:
let baseUrl = document.querySelector('base').href;
Try changing it for:
baseUrl = baseUrl || document.querySelector('base').href;
It's not very neat, but it should not complain about the value being defined already.
Although I think this is unrelated to your problem and may stop showing this error once a proper 404 page is defined.

Kik Bot | Uncaught ReferenceError: require is not defined

I'm trying to create a kik bot, but I keep getting this error anytime I try and run it "Uncaught ReferenceError: request is not defined". I have installed node and the kik package but that seems not to be working here is my Javascript:
request.post({
url: "https://api.kik.com/v1/config",
auth: {
user: "<my-user-name>",
pass: "<my-api-key>"
},
json: {
"webhook": "<link>",
"features": {
"receiveReadReceipts": false,
"receiveIsTyping": false,
"manuallySendReadReceipts": false,
"receiveDeliveryReceipts": false
},
"staticKeyboard": {
"type": "suggested",
"responses": [
{
"body": "Start",
"type": "text"
},
{
"body": "Help",
"type": "text"
}
]
}
}
}, callback);
I've been trying to looking into this but came up with nothing. Could it be a Node problem?
Thank you in advance!!
From the conversation we had, I thought I put the answer here for future references.
That piece of code is supposed to be run on NodeJS in commandline, not a browser.
You need to setup a node environment, install the required dependencies using npm or whatever you like. Then run the code in node.
$ npm install request to install request.
var request = require('request') to require the installed library.
Also you need to modify the code and provide proper a callback function. You can read requests documentation here.

ng-lb command in StrongLoop fails when using local-storage-connector

Dear Strongloop community
I am following the example provided by loopback for evaluating local-storage data store.
It works fine and I can use the rest API to create and retrieve files from the local file system (used as a data source).
I had to used "$ npm install loopback-component-storage --save".
the datasource defined in datasource.json is:
{
"db": {
"name": "db",
"connector": "memory"
},
"localFileSystemStorage": {
"name": "localFileSystemStorage",
"connector": "loopback-component-storage",
"provider": "filesystem",
"root": "./property_data"
}
}
the ./property_data directory is where all the data is stored. (relative to the project directory) and I can access it through rest with no issues.
Next I was trying to generate Angular service component so I can connect to the loopback server using Angular application. So inside the client directory I executed:
../example-2.0/client$ lb-ng ../server/server.js js/lb-services.js
and it failed:
/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/providers/filesystem/index.js:25
throw new Error('FileSystemProvider: Path does not exist: ' + this.root);
^
Error: FileSystemProvider: Path does not exist: ./server/storage
at new FileSystemProvider (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/providers/filesystem/index.js:25:11)
at Object.module.exports.createClient (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/providers/filesystem/index.js:17:10)
at Object.createClient (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/factory.js:86:18)
at new StorageService (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/storage-service.js:29:25)
at Object.exports.initialize (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-component-storage/lib/storage-connector.js:12:19)
at DataSource.setup (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-datasource-juggler/lib/datasource.js:332:17)
at new DataSource (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback-datasource-juggler/lib/datasource.js:109:8)
at Registry.createDataSource (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback/lib/registry.js:349:12)
at dataSourcesFromConfig (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback/lib/application.js:415:19)
at EventEmitter.app.dataSource (/home/eval/projects/loopback-component-storage/example-2.0/node_modules/loopback/lib/application.js:222:12)
Am I missing something?
I could really use some help here.
Thanks
In datasource.json file you have provided the relative path ./property_data with respect to /server folder.
Thus you need to call any method from that folder only.
Now when you are running it through the server then you are running it from /server folder thats why it runs without an issue but for angular Sdk generation you are doing it from client/ folder. Thus its genetating Path does not exist error.
Thus the correct syntax would be:
../example-2.0/server$ lb-ng server.js ../client/js/lb-services.js

Categories

Resources