Hi!
I am a beginner in JavaScript, been practicing vanilla JS (which I understand except for Object oriented JS because I can't wrap my head around certain real life examples), jQuery, Vue and React. In this world of libraries for frameworks, frameworks for libraries etc. I feel like everything confuses me now.
I hope some people can educate me alittle regarding the functioning of nodeJS, serverside and clientside. What happens where. Below is some experience which confused me to the part where I am now. It will serve as context.
I the past, when I made websites, all I did was send some files: index.html, contact.html, about.html, animations.js. So google searched for these HTML files, and the browser requested that specific file and the server showed it to the browser.
Now I am busy with creating react apps things get very fuzzy.
At first I made a /dist/ folder react in my react app which I served to firebase. To do this I used a firebase CLI which asked me to make a firebase JSON, firebase init, and some loggin in through the command line. Once served everything, including the routing, worked as expected.
Next I used npm run build and it gave me the same results(i think) in a /build/ folder. I uploaded this to a hoster through the cpanel and it didn't work as expected. The routing was broken. I've read things about the server needing to run JavaScript on the backend, to make it work, because the router dependency hasn't loaded up yet. Which makes sense. This brought me to express.
Every post about express used localhost as example which gave me the impression it has to be run on the server. But I, having a hosting account on a host service that uses nodeJS, have no idea how to make those two things work together. And what kind of things that would enable me to do. And this confused me even more because I didn't have to deal with this, when making a heroku app.
When I made a VueJS app, I served it to heroku. To do this my project-accomplice had to make an express server.js to do some stuff (not sure what that stuff was, code below:
const express = require('express');
const serveStatic = require("serve-static")
const path = require('path');
app = express();
app.use(serveStatic(path.join(__dirname, 'dist')));
const port = process.env.PORT || 80;
app.listen(port);
)
and it 'just worked'.
And just as with firebase, I logged in through the console and it got served. In the end, I simply searched for 'Routing not working react' and someone came up with a .HTaccess solution:
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
This seemed to work. My app works as expected. This made me happy but also even more confused. Cause what was all this NodeJS stuff I was looking for? I mean. I just got my host provider to activate a nodeJS terminal. Also do I need to learn all ins and outs of htacces now?
So after this context, I have a few burning questions:
1: If a host service has nodeJS enabled. What does this offer me? I got it working through the .htaccess now. I don't think NodeJS has anything to contribute to this?
1.1: If it doesn't contribute anything, why are there so many posts on the internet specified for: 'deploy react to nodejs server'?
1.2: If I would use the nodeJS server to run backend javascript, what would need to be running if I want routing to be working?
2: What is express his place in all this. Do I run it serverside? Client-side? Why was it used to connect with heroku? I didn't need that with firebase.
3: How is the SEO situation in all this? Lets say I make a portfolio SPA. Component Home, component portfolio react, component portfolio vue. If someone googles 'beardedhippo react' will they still see mywebsite.com/react? Will google index this as seperate page? Or will my SEO suffer because of this?
4: Do I need to learn all ins and outs of HTacces if I want to be considered a good JS/React/Vue developer in the future?
I thank the person reading this for me and taking time to think about good things to say. I really do.
Have a good day!
Top comments (0)