Firebase via node.js for dummies? - node.js

I have a server for my websites. The root folder have a public_html for my main site, then I have folders for my other sites. For example 'site2' in the root folder acts as the public_html for example www.site2.com and so on. The index file ./site2/index.php === www.site2.com in other words and vice versa.
I have tried logging into my SSH and installing node.js (installed in root folder with folder name 'nodejs' as per a2 hostings instructions), then both:
npm install firebase-tools -g and without the -g in the folder ./site2/firebase/cv where I want my index.html for my first firebase project, but to avail.
I have also tried to follow the Firebase documentation 'Add Firebase to your JavaScript Project' but there I don't understand what they mean with the package.json file. I ran npm init and got a process prompt to create one. But what values should I input? Where should I out the file? What? Wat?
Note! Each time I have removed the folder links that was created in my ./bin folder (firebase-> ../lib/node_modules/firebase-tools/bin/firebase/ and npm-> ../nodejs/lib/node_modules/npm/bin/npm-cli.js), the node file in the same directory, the ./lib and the ./nodejs folder and any of the same created in the ./site2/firebase/ folder before installing it in a new way (of those I mentioned that I've tried).
I have also logged in via firebase login --interactive (did that early and I'm still logged in if I try again).
No matter what I do, I get errors that the firebase specific variables are not recognized, or that the dependencies (in the header when using firebase init hosting) are not found when opening the inspector console in the browser.
So: Seeing that I have the folder structure that I have for my sites after installing node.js (with ./nodejs/ as the install for node.js and thus a ./bin folder with the npm-> ../nodejs/lib/node_modules/npm/bin/npm-cli.js folder link and the node file in /bin, and that I want to use firebase for ./site2/firebase/cv/index.html:
Can someone give me a step by step? Is there any hope? I liked the way it was when I tested it locally, where I can just have <script src="app.js"></script> tag before the end of my body tag and then the dependencies in the head tag, like in the autogenerated file when using the firebase.init hosting command.
I don't want to put script tags in my page with credidentials like the snippet I can grab from the Firebase console and I want to host my files myself (but use the firebase database, auth features etc).

In this page you have what you need to do to use Firebase on the web just follow the instruction or watch the Youtube videos, there is more video on the Firebase channel: https://firebase.google.com/docs/web/setup
And it's meant to be used like this, meaning adding script tags and credentials.
Also Firebase Cli has nothing to do with using the Firebase real time db in your app, it's rather a tool to use if you want to use Firebase hosting, cloud functions etc.

Related

Creating Reactjs app production build without using node

We have just a single webpage with some links on clicking them it will redirect to different sources. As of now we are using "npm run build" to create the production package.
But because of the build files having dependencies with node, i cannot host it in a particular server.
Is there a way to create the Reactjs production build without using node ?
I suggest using Netlify to host your react app easily .
Below are some resources that can help you along the way.
https://www.netlify.com/with/react/
https://www.youtube.com/watch?v=sGBdp9r2GSg
You can have a build and upload it manually to your Netlify account,
You can use the CLI (netlify-cli) or you can your account to git .
Similar approach can be followed with git pages for example.
What packages do you have in your package.json file? Did you use a React project template that uses Node server-side features? It seems like you want to host your React project statically, not necessarily get rid of Node and npm.
For example, I've worked on lots of React projects using npm and create-react-app that we were able to host with a .NET backend and Microsoft IIS (instead of Node). The output is .html, .js, and other static files that you can host anywhere.
When you build a react app, the files at folder build contains everything it needs to run
If your hosting server hasn't integration with CI/CD, then you must deploy manually only the build folder, not the root folder (the folder that contains package.json).
I believe your issue is just a confusion/misunderstanding on how react works, how to deploy it, and how to run it.
React needs to be built on an environment where node, npm, and other tools are available. It can be on a build server or in your local machine.
After built, react app is just a folder with a bunch of html, css, js files which will run on the client browser, so, there's no dependency on NODE anymore.
These static files must be served with a simple static file server (apache, nginx, iis, etc),
I recommend you build the app locally on your machine and then deploy manually to your host through ftp, ssh or web interface.
If react is overkill to your needs, then don't use it.
The best approach is to host it in a cloud service that can do the full CI/CD integrated with git, all automated (Google GCP, AWS, Azure, Netlify, etc)

Problems with getting started with node.js and puppeteer

I am quite new to programming and today decided to attempt and create a node.js and puppeteer project with the purpose of scraping website into a .txt file. I ran into issues straight away since for the most part I have no idea what I'm doing. After installing node.js and puppeteer, I was guided by some videos and articles I found to create my first project. In the command prompt using mkdir and later cd I was able to create and access the new directory, but I started running into problems with npm init. It only places the file package.json in the repository, but there isn't a package-lock or node_modules file anywhere. No idea what they do but thought this was a problem. When I open cmd and try to run the app by typing node app.js it returns Error: Cannot find module 'C:\Users\emili\app.js' along with some other gobble. What should I do, to be able to run the simple application I wrote?
It seems that you are missing some key knowledge on how NodeJS works, but in order to fix your issue (for now), you will need to take a few steps.
First, in your working directory (where the package.json is), you'll need to install your modules.
Run npm install puppeteer. This will do two things, create the node_modules folder and create the package-lock.json file.
Create a file named app.js (either manually or by running the command touch app.js) in your working directory, and put the following content inside of it:
console.log('Hello, World!');
Save the changes to app.js and then run node app.js in your terminal. You should see Hello, World! output to the terminal.
The reason npm install puppeteer created the node_modules folder and the package-lock.json file is because they weren't needed beforehand.
When you run npm install PACKAGE_NAME, you're installing a module (otherwise known as a package), thus it creates the node_modules folder so that it will have a place to put the module so that your code can access it. It also creates the package-lock.json file, which is used to track the module versions inside of your project.
With this information, I request you go back to the tutorial you were originally following and try going through it again and attempting to understand each of the core concepts before writing any real code.

Firebase CLI - "Invalid project ID specified"

I'm trying to use Cloud Functions in my Firebase project.
I'm trying to initialize the CLI features in a new folder in my Mac. I opened a folder which called CloudFunctions and ran the firebase init command into this folder, and this is what happens:
It doesn't ask me if I'd like to set a new default project ID for this folder, but it's using an old project ID which is probably wrong.
When I try to run firebase use <my_project_id> I get this error:
but as you have seen above, running firebase init fails because the default project ID is wrong.
The CloudFunctions folder is currently empty, it doesn't have firebase.json file or any other file.
The Firebase CLI will look in the current directory and all of its parent directories for a .firebaserc file that describes a project. You probably have a .firebaserc file in your home directory, which it thinks is the project that you're currently working on. Move that file out of the way (and figure out if it's actually something you want to keep using).

Which files from Node.js app must be uploaded to a web-hosting?

Perhaps this is a silly question. It came out while I was learning how to set up a Node.js application for production on Ubuntu and digital ocean.
Let's say I have a simple data visualization app made in Node.js, using node modules such as express, page, axios, yo-yo, and browserify to compile my files.
I want to upload my app to a webhost that already exists.
This is the structure's app:
node_modules
public (app.js and app.css)
src (header, home, and footer folders)
views (index.pug file)
gulpfile.js
index.scss
package.json
server.js
Which files I need to upload in order to see my app as I see it in localhost?
You need to upload everything.
What Maximelian says is true if you're going to run npm install again on your server. The standard way of doing this is sync the project using git (you can find a .gitignore template for node.js here).
Once setup you'd do something like this on the server after making the commit locally, and pushing to your remote git repo:
git pull
npm install
npm start
If you were to just ftp the full working project including node_modules it would work just by running npm start. But the above method is what I'd recommend.
If I remember correctly everything except node_modules, if you did not customized them. (rewrite some behavior after module installation)

Getting 'Cannot GET /' when trying to connect to localhost:5000 Firebase

I am trying to get my localhost server on Firebase to work but I am continuing to get the following message in the browser 'Cannot GET /'. I took a look in the console and all it says is 'http://localhost:5000/ 404 (Not Found)'.
I have tried re-running the server using 'firebase serve' and that doesn't help.
I ran 'firebase init' again and that didn't help either.
I re-installed the firebase tools by running 'npm install -g firebase-tools' and then running firebase serve again and still nothing.
Not sure whats going on because it was initially working. I installed some grunt plugins and moved my index.html file under an html folder although I still have an index.html file under the public folder it still says 'Cannot GET /'
I have also tried in different browsers restarting them etc.
I am using a Mac OS X El Capitan.
Let me know if you need any more info. Thanks in advance
I had this issue running firebase serve from within the scripts directory in the "Friendly Chat" tutorial. Starting the server from the parent directory got it working again as expected.
if this will help someone save time.. a possibility: it could be that the build step did not complete, this was my case, and the build/... directory had no index.html
I had the same issue when was trying to serve an Angular application with the firebase command.
Firstly, you should see the firebase.json file.
It should contain the "public" value, like:
{
"public":"dist/ProjectName"
...
}
But the dist folder will be auto created only after you build the Angular project:
ng build --prod
After you can do the:
firebase serve
Hope it will be helpful for beginners.
Ok so got this working but pretty much had to start from scratch again. I deleted the public folder and just moved my html, css, js, and node-module folders out of my project directory and then re-installed firebase-tools and ran the 'firebase init' command and then restarted the localhost server and everything started working again. After which point I moved back all my previous folders and things are working as before.
Not a 100% sure how the issue happened but at one point I did delete my index.html file and then put it back in later on as I was testing something. At which point I feel the issue started. I will try to test this scenario in a test project but I guess for the time being don't delete your index.html file just modify the existing one. Thanks all.
The error message shows up if you run 'firebase serve' within the project folder.
Navigate to the parent folder (up one level) using 'cd ..' and start the server from there.
Please check if content of your website is present in folder
"hosting": {
"public": "<folder with your website files>",
from your config "firebase.json"
If you like me, before overthinking the problem, make sure you provided the correct URL to index.html.
In my case, I didn't take into account different structure of my directory. You should provide the path to index.html relative to the root directory of your firebase project. For example, in my case, the correct URL was http://localhost:5000/button-component/public/

Resources