Develop Reference

Issues with deploying React based app on Railway

I was moving my fullstack app (React + Express) from Heroku.
The problem was that React app has to be built for running (also has to install required dependencies), but on git we usually store only raw source code.
A common structure for fullstack projects:
Heroku has the option to run scripts after deployment with a special script in the package.json file:
"heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
But I didn't find a similar ability on Railway.
So my solution is:
Remove the build folder from the .gitignore file
Build react app with npm run build
Add all to git repository
Deploy on Railway via Git Repo
Do not forget to add environment variables
Create domain name to have access via public internet
Be happy!
I had some problems with this, so I am sharing the easiest solution for others.

By selecting a project on Railway, and going to its settings, you would find a field named Build Command. There you can add your build commands. For example, in your specific case, this should work:
cd client && npm install && npm run build && cd .. && npm i
If it does not work, look at your project structure and adapt the command. Currently, the field is there:

Go to the project setting and set your build command. I've fixed it this way- https://prnt.sc/OnYPp1Q5-Uze
npm run build

Setting up server.js

I am trying to containerize my React application with docker and am now a little bit stuck with the server.js file as I do not know how to "implement" the application inside. I was able to simply show a "Hello World" but can't seem to run the application inside.
My idea was initially, that I could just use the index.js file as an entrypoint and use it in the "res.end(x)" as this was the place where I could simply enter the "Hello World".
Am I missing just something small or is my general approach wrong?
My server.js file looks as followed:
const http= require('http');
const fs = require('fs');
const index = fs.readFileSync('index.js');
let app = http.createServer((req, res) => {
res.writeHead(200,{'Content-Type': 'text/plain'});
res.end(index);
});
app.listen(9030, '0.0.0.0');
console.log('Node server running on port 9030')

I share with you this best documentation :
https://nodejs.org/en/docs/guides/nodejs-docker-webapp/

React is generally coded in .jsx files, which need to be compiled/transpiled into regular Javascript. Once this is done, you can serve these files to web browsers any way you like.
Understanding Build tools
React compilation/transpilation is done using Webpack or Parcel. If you're using Create-React-App, then you're using Webpack under the hood. CRA npm start will run a Webpack dev server, and npm run build will put all of the files you need in your build directory. You should do the latter if you want to
Avoid using Webpack dev server
Most tutorials, including the one linked in the comments, suggest using Webpack development server (aka npm start) to run your server in Docker. which is not recommended. Not only does it consume more resources to run, but the development build will run slower in browsers than the production build. The development server is also not meant to handle heavy loads.
Use build for production, with a real server
Use npm run build to generate the build files in the build directory, then use a real web server to serve them to the world.
One example in Docker, using Nginx to serve the files, can be found here
Alternatively the CRA build command itself offers a helpful hint:
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
This will work in a Docker Node container. An example of a very not-optimized Dockerfile might look like this
FROM node:16-alpine
COPY . .
RUN npm install
RUN npm build
RUN npm install -D serve
CMD ["./node_modules/.bin/serve", "-s", "build"]
The build process can be improved here to leverage cache (by first copying package.json and package-lock.json and installing before copying code over, see example at the end of the answer here), and all of the RUN commands combined

nodejs bootstrap project works local only

Ive been trying out different things, and looking up various ways to solve it, but I'm in need of some extra hints to make this work.
I have a working NodeJS Bootstrap project with Gulp. My website functions locally.
So in my project I have the fiollowing files (among other folders) :
gulpfile.js
index.html
package.json
When I locally run my project via 'gulp dev' everything seems perfect. On Heroku after deploying it gives me the error: npm ERR! missing script: start
This makes sense, because indeed my package.json doesn't have a start script. How can this work on local?
any leads?
thanks

node.js file
name it index.js
first before you start move all the current files into a new folder called public in the parent folder above public create the file index.js
once you are in the parent folder above public run this in the command line for the directory where you created the index.js file
npm i express --save
this will install a mini framework for node.js and save it to the project.json config
for the index.js file this is the content
/// START
var express = require('express');
var path = require('path')
var app = express();
var port = process.env.PORT || 80;
// this allows the files to be visible without having to type in the
// index.html for the url simply do / and you'll get the url
app.use(express.static(path.join(__dirname, 'public'),{
extensions: ['html']}
));
app.listen(port);
///END
you need to make sure that the index.js (node file) is in 1 folder above the rest of the project. The project should be in a folder called public in this case
before you upload this to the heroku get it working on your local machine
you need to run node index.js if you get any errors we can work through them but this is a really generic static serving node.js server.
last thing you need to do is go into the project.json file and add the following you can add it right above "title" in this case so it's easy to find later
"scripts": {
"start": "node index.js"
}

If the code is client-side, you should serve up the bundled HTML/CSS/JS in a static server. Doesn't make sense to run node just to serve up your static assets.

Ive never used heroku but for my node application that is hosted in AWS i had to add a start script to my package.json
"scripts": {
"start": "set NODE_ENV=production nodemon app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
You can use similar node start commands if youre not using nodemon.

How To Deploy an Angular/Node app

I have a simple Angular 4 frontend as well as a node backend which is hosted separately on Heroku.
I deploy my Angular app by running ng build and copying over the contents of the dist folder to the server.
I have since then decided to integrate the backend into the front end so it's all just one project instead of two.
I can easily run node server.js on the root and it runs perfectly on my localhost.
But how can I deploy this to my server? I obviously can't just ng build and copy over the dist folder because that only builds the client folders and files.
Could I just copy over the server folder which holds the routes as well as the server.js file along with the client files and then somehow tell the server to run server.js when the site is loaded?
I use FileZilla to transfer my files onto the server.
Questions:
How do I deploy my angular/node app with FileZilla?
Which files/folders to I copy over with the client files?

If you are using Angular CLI, run ng build command to generate the dist folder.
Copy the dist folder to the backend server nodejs project.
Serve the dist folder using your Nodejs code.
If you are using ExpressJS. This can be done in a single line
app.use(express.static('dist'));
Install Heroku CLI and follow the tutorial to deploy your app: Heroku NodeJS Tutorial

You don't need to build the node app. Node runtime can compile the javascript on the fly.
The build step in angular packages up your code into one file. There is no equivalent in node as there isn't any point. The reason angular minifies and packages a file is so you can download it quickly. You never download the code from node.
On Heroku it's really easy, you don't need to copy anything over just run git push heroku master from the root of your node folder as per the instructions here https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app
Just make sure that in your package.json you have all the modules you rely on. It might work locally if you have npm modules installed globally but they also need to be in the package.json so heroku can download them by running npm install

Angular Full Stack Example on github

I am trying to understand the example of Angular full stack project but I am not able to do so!
The project is here:
https://github.com/DavideViolante/Angular-Full-Stack
in the package.json, you can find a "dev" script to test locally the app. the command is the following:
concurrently \"mongod\" \"ng serve -pc proxy.conf.json --open\" \"tsc -w -p server\" \"nodemon dist/server/app.js\"
I don't understand why ng serve is called and app.js also. I mean ng serve create a static file server and there is also a static file server with Express. So launching that starts two servers. What's the point?

Here is a breakdown of all command
concurrently -- runs all command simultaneoulsy
\"mongod\" -- To Start MongoDB server
\"ng serve -pc proxy.conf.json --open\" -- To serve angular stuff
\"tsc -w -p server\" -- run the compiler in watch mode and compile project
\"nodemon dist/server/app.js\" -- to run your server side project

I don't know this project but the app.js normally is for the back-end and the ng serve is for serving an angular project in your development environment.
I hope this help.