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?
Related
Im trying to deploy angular app 13.2
ng build
This command generated dist folder
//Install express server
const express = require('express');
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+'/dist/index.html'));
});
// Start the app by listening on the default Heroku port
app.listen(8080,'127.0.0.1');
Using above started server, but finding this error in browser console
Any help...
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 tried to connect angular front end with nodejs earlier I ran ng build on public folder of app and then ran localhost:3000. No error was given on compilation but app is broken now. Now do I achieve it? My folder structure is like this
client
public
app.js
client contains all angular code, public contains compiled code of angular
till I have also changed output path to ../public in angular.json.
And here is my app.js:
var express = require('express');
var path= require('path');
var cors = require('cors');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var passport = require('passport');
var app= express();
var port = 3000;
app.set('view engine','ejs');
//app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, '/views'));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/api', routesApi);
app.get('/', (req,res) => {
res.send("Invalid page");
});
app.listen(port, () => {
console.log(`Starting the server at port ${port}`);
});
I think up to now you have a build of a running angular application and perfectly running node.js server.
What you have to do is host your client application. Follow the following steps to get this working.
Install http-server globally on your machine using npm install http-server -g command
Then run http-server /path/to/your/dist/folder. (You should get a dist folder after running ng build --prod)
Then run your node.js server.
And open your browser and go to http://localhost:8080
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
I generated an Angular2 project by using Angular-CLI. This is the front-end side. Now I'd like to add an Express server but I don't know how exactly should I do that.
Should I add an express app.js file into generated by Angualar-CLI "src" directory? I've tried it and what's next? To start Angular-CLI project, I need to type ng serve in CMD. To start server, I need to type node app.js.
Example of app.js
var express = require('express'),
path = require('path'),
favicon = require('serve-favicon'),
logger = require('morgan'),
cookieParser = require('cookie-parser'),
bodyParser = require('body-parser');
var app = express();
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.listen("8080", function() {
console.log("at 8080 port");
});
module.exports = app;
Well... Angular2 doesn't work when I start app by node app.js. ng serve builds all files and in mysterious for me way puts it all together.
Maybe I should create front-end and back-end completely separated? But what then? Use technology like Nginx for reverse proxy?