Im currently building a simple app using the MERN stack to learn. What Ive done so far:
-User Registration and Login (API)
-TODO List (API and Frontend with static files)
Ok, Everything works good and as expected, except for one thing.
I attempt to use my API's for any request, but at the same time I want my whole app to work rendering in a web browser (TODO list). So, the process I've followed is:
-Start node instance
-npm run build (To build react project files)
I did a research on how to use React build in node project and I did the following:
app.use(express.static('myproject/build'));
app.get('/*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'myproject', 'index.html'));
});
Good! So when I go to http://localhost:4000, it renders my index file and it actually works with my Login API, but I have some API's that are only available for consuming data and not rendering UI.
So, my problem is that when running the app, if I go to: http://localhost:4000/api/users/getdata
I get an error saying: Error: ENOENT: no such file or directory pointing the index.html
Ok, if I uncomment the code I posted before, then of course my app is not rendering UI, but my routes from API's work normally.
I know this might be setup/configuration process, but Im trying my best to understand this. If somebody could assist me with this problem please.
The hierarchy im working goes as follows:
myproject (contains models, routes (API's), middlewares, index.js)
frontend (inside folder 'myproject') (build, src (Components))
I did what #MaxAlex suggested. Changed the code from:
app.get('/*')
to
app.get('/')
Related
I'm trying to serve different parts of my app on one server.
For instance, a user could visit,
http://app.my-site.com
or
http://admin.my-site.com
I'm using React on the frontend, conditionally producing the appropriate routes based on the subdomain, meaning I actually have one server serving one frontend that dynamically renders content.
When working with the webpack devserver, I'm able to enable this feature by adding the --allowed-hosts all option.
But then I build the project and try to serve it as follows:
app.register(require('fastify-static'), {
root: path.join(__dirname, 'client', 'dist'),
});
app.setNotFoundHandler((request, reply) => {
reply.sendFile(path.join(__dirname, 'client', 'dist', 'index.html'));
});
This works, but only locally (Heroku throws a 404 error).
After some research, I've found that express has a package for this purpose called express-subdomain. Is there a similar one for fastify or should I be doing something else entirely? After some research, I found answers online suggesting that I should add a CNAME for every subdomain I use.. which I could try, but I'm honestly just trying to understand why building my project works locally but not when deployed elsewhere.
I start the server like this:
app.listen(PORT, '::', (err, address) => {
if (err) throw err;
app.log.info(`Server listening on port ${address}`);
});
Hi even after lot of search i am still confused what is correct way to deploy my react app created using create-react-app with express as backend.
I ran npm run build which created build folder. I copied the build folder to be served as static folder of express and had put
app.use(express.static('build'));.
It is working fine for homepage, that is homepage opens when i run my express node server but when i go to anyother link outside homepage it gives 404.
Everything is working fine in developer mode, which i run by npm start command. I just want to know what i am doing wrond here. Let me know anymore info required to understand the problem. Thankyou.
It sounds like you don't have the backend server running. You need to npm start your server, and then npm start your front end if that make sense. They are 2 separate things.
Are you using client-side routing? A popular implementation of that is react-router.
Let say you are trying to access /page1, what client-side routing does is use the JS to toggle between different components to "fake" the routing, instead of rending a new HTML.
Yet, by default when you change routes, the browser does the usual stuff and send a GET request to the server asking for the corresponding HTML file. But since you only have index.html served, that's why you received 404.
You need to add the following at the end of your app.js, right before you call app.listen of your express server to tell the server to always return index.html no matter what route does it received.
/* client-side routing.
* For GET requests from any routes (other than those which is specified above),
* send the file "index.html" to the client-side from the folder "build"
*/
app.get("*", (_, res) => res.sendFile("index.html", { root: "build" }));
// your usual app.listen
app.listen(port, () => console.log("Listening"));
My Vue app is set up using Vue CLI (Webpack) and it's working as it should. My NodeJS/Express REST API is also working properly. However, to run them simultaneously I now start a local server for each of them -- each with its own port. I would like to have both of them communicate over one port.
Localhost:8080 should point to the home page of my Vue App and the API requests should follow localhost:8080/api/...
In my production environment I use one and the same port/URL by serving the Vue App as a set of static files ('dist' folder). In my development environment I don't know how to set this up, however.
I looked around for answers online, but feel lost among all the different terms I have come across (.env, crossenv, nginx, cors) and that I am running in circles.
What would be a good way of setting this up?
Thank you
Edit:
I ended up creating three modes to run my application:
Development
I use one script in a package.json to start the frontend and backend server on different ports, using pm2 to run the servers in the 'background' rather than blocking further commands in the terminal/cmd. I use configured a proxy inside my vue.config.js to redirect my API calls made in the frontend to the right base URL and used cors as middleware to allow requests to my API from other domains/ports.
Staging
I use one script in a package.json to build the Vue app into a folder ('dist' folder inside my backend folder) that is a collection of static files and start the backend server. My backend is set up to know when I want to go into staging mode and then serve the static files in the 'dist' folder.
Production
I use one script in a package.json to build the Vue app into a folder ('dist' folder inside my backend folder) that is a collection of static files and push my backend (incl. the built static files) to Heroku.
Well if you need to run both on the same port you could first build your app so that you receive a dist directory or whatever your output directory is named and set up an express server that serves that app and otherwise handles your api requests
const express = require("express");
const path = __dirname + '/app/views/';
const app = express();
app.use(express.static(path));
app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});
app.get('/api', function (req,res) {
// your api handler
}
app.listen(8080)
Assuming that node and the 'app' will always run on the same server you can just use a template library like ejs.
You would then just bundle the app and api together, assuming that the front-end is tied to the backend, realistically you would not even need to hit the API as you could just return the records as part of the view, however if dynamic elements are needed you could still hit the API.
Now, with that said, if the API is something used by many applications then it would probably make sense to build that out as its own microservice, running on its own server and your frontend would be on its own. This way you have separation of concerns with the API and Vue app.
I have two folders into a principal folder, one folder is called frontend, and had the angular project, and the other is called backend, this folder has a backend and all API. I would switch this project like SSR project, can integrate the angular project into a node project, then when I execute
npm run dev
And node project starts on the respective port, automatically the frontend side starts within.
I tried multiples ways to create a path from one folder to another, but not have success.
If I do this
const indexTest = (path.join(__dirname, `../frontend/src/index.html`))
server.get('/', (req, res) => {
res.render(indexTest)
})
Appear this error
But, if I do that
const indexTest = (path.join(__dirname, `../frontend/src/index.html`))
server.get('/', (req, res) => {
res.sendFile(indexTest)
})
Don't show me any error, but the principal page is blank
Server firmware code
Server app index.js principal
You are trying to render the frontend based on the source, and that will not work.
On Angular projects you need to build the code first, so later you can render it.
If you want to do SSR, then you will need to use something like Angular Universal
Another option would be to point the backend to the dist folder, and then run the angular cli in watch mode (scroll till bottom). Like this: ng build --watch --output-path dist
You will need to add this code to your backend.
Probably something like this:
server.use(express.static('../frontend/dist'))
I'm rather new to how webservers behave in general, so I have a few questions I hope someone can help me with.
It would also be nice if anyone could point me to an article or some documentation about the following topics.
Basically I'm trying to develop a webapp using Angular2, Expressjs and obviously node.js.
I have already successfully developed some basic Angular2 apps without a backend attached to it, which worked fine.
However, now I'm trying to send the index.html file (which contains a tag referring to an Angular component) to the browser from my server.
app.get('/test', function(req, res) {
res.sendfile('index.html');
});
You can find the html here: http://pastebin.com/utMHk8Pe
However, even though the node_modules package is on the same hierarchic level as both server.js and index.html, going to localhost:8080/test gives me a 404 for the node_modules script files in my html header.
Q1: Why doesn't my server find the node_modules folder?
Now, when I run my index.html file through following link, http://localhost:54720/testapp/index.html, everything works just fine.
Somehow it finds the node_modules at port 54720 but not 8080 (which is the port I made the express app listen on).
Q2: Why can't my server find the node_modules folder at the port I make it listen on?
As I've already said, I'm really new to node.js and webservers in general.
I'd be very grateful for any help!
Even linking me to an article which could be helpful would help me tons, since I can't really find anything since I don't know what to Google for.
You need to define a static folder to enable this. Something like this:
var express = require('express');
var app = express();
(...)
app.use('/static', express.static('public'));
This way, you will be able to serve the static files you need for Angular2, the ones that are present under the node_modules (angular2, systemjs and rxjs).
See this documentation for more details: http://expressjs.com/en/starter/static-files.html.
Hope it helps you,
Thierry