Newbie question that is driving me crazy. I am trying to build the ToDo app with the MEAN stack and I can't get the Express server to connect to Angular 2. I believe it has something to do with where I have my index.html view relative to the Angular installation, but I can't figure it out.
Your project folder struction should like below
project/server [Node]
project/server.js is your express server
// Get our API routes
const api = require('./server/routes/api');
const app = express();
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));
// Set our api routes
app.use('/api', api);
// Catch all other routes and return the index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
project/src/index.html [angular code]
You can build angular code into dist using
ng build
This creates the dist folder with the angular 2 app built files. Now we can serve the app with express.
For run server use
node server.js
which create server
Go through https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli for more information.
Thanks in advance
Related
I am still learning the whole MERN stack technology. I am trying to follow a tutorial to serve my Create React App build files to my backend but I keep getting error. The error I am getting is this:
Error: ENOENT: no such file or directory, stat 'C:\Users\kingsley\Desktop\blogfullstack \api\public\index.html'
This is my project structure:
I served the react build files in a folder called public inside my server folder. The index.html file is there as well.
In my server app.js file, I wrote the following codes according to the course tutorial:
app.use(express.json());
app.use( express.static(path.join(__dirname, 'public', 'index.html')))
After the above codes, I have my API end points which are 9 in total such as:
app.use("/api/v1/auth", authRoute);
app.get('/*', (req, res)=>{
res.sendFile(path.join(__dirname, 'public', 'index.html'));
})
module.exports = app;
What could I be doing wrong? I would love to learn and fix this.
I've deployed a react js application with digitalocean app platform and there's an express js file to make react js as a production application. when I deploy my application it loads smoothly. But when I deploy a new version browsers show only a white screen for the index page. But I can manually route to other pages like /about, /stlogin. Also, the console shows an error stating
Unexpected token '<' main.229b5112.chunk.js:1 . But after clearing the browser cache it loads without any problem. I tried giving a homepage to the package.json file but it didn't work.
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(8080);
build folder and server.js are in same level.
I am deploying a Node.js Express app to a VPS by Render. When I run the app on my local machine, the npm start command does a great job of serving my file when I point the browser to localhost:3001. However, after I deploy, the base directory '/' returns "Not found". I have to point my browser to example.onrender.com/public/index.html.
How do I make sure that example.onrender.com/ routes the request to public/index.html?
Thank you!
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(3001);
Actually just had to change "Publish Directory" settings in Render to ./public
I'm fairly new to Gatsby and React, but I'm looking to deploy the static assets generated by a Gatsby build on an Express server. If I import the Public folder generated by 'gatsby build' into the server directory, and use the following code:
var express = require('express');
var path = require('path');
const app = express();
app.set('view engine', 'html');
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', function(req,res){
res.render('./public/index')
});
app.listen(8080, function(){
console.log("Running on port 8080")
});
The homepage is just blank. My question is, how can I configure my Express app and Gatsby (and therefore React and React Router) so that the Gatsby site will run through my Express app?
const express = require('express');
const path = require('path');
const app = express();
app.listen(9000);
app.get('/test', function(req, res) {
console.log("not being hit");
res.send(200);
});
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
console.log("always hits");
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
This seems like such a simple problem but my brain is starting to turn to mush.
Here's the details:
I have run build on a react app and the index.html file resides in the build folder, and I want this served via express.
I want express to prioritize /test first, and if it's not /test, then I want it to serve the index.html file in the build folder.
If you go to /test, it is skipped and always hits the /* route. If you remove the wild card and use / instead, neither routes will hit if you go to / or /test in the browser. However, index.html is still served and it looks like that's because of the static middleware.
Everything I have read suggests that order in express is important, but I feel like I'm losing my damn mind and I'm starting to slowly descend into madness.
Thanks in advance.