Develop Reference

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

How to deploy Laravel + Nuxt application?

I have built Web application using Laravel As API and Nuxt As Front and. These 2 built desperately. When the development ongoing Its isn't an issue. Because i can run them using their own development servers. Then i have bought a VPS server for host this. Now the question in how i deploy these two apps on my VPS. Specially How i can deploy nuxt app correctly in vps. Its not static side. It is ssr app.

Essentially, you are going to need a few things:
A server (which you already have)
nginx
PM2
Node/NPM installed
The tricky part of this, is to make sure the server continues running and auto-restarts in case of a crash. PM2 solves that issue, and you can read more information on how to use it here: https://nuxtjs.org/docs/2.x/deployment/deployment-pm2
You can install it by:
npm install -g pm2
Which will install PM2 globally on your server and you'll have access to the pm2 command.
Follow the documentation above, and all you gotta do is run:
pm2 start all
This will start the Nuxt service and it will run on whichever port you've defined on your nuxt.config.js or package.json files.
Now that you've got your Nuxt instance running, you need to make sure that requests that come through the browser end up on the port that Nuxt is running on, that's achievable by using nginx's reverse proxy feature that you can read more about:
https://nuxtjs.org/docs/2.x/deployment/nginx-proxy/
That documentation provides you with an example of an nginx config file, and you shouldn't really have to change anything other than the server_name, and the proxy_pass in case you've changed the default Nuxt port from 3000 to something else.
Additionally make sure that you have allowed port 80 to be listen on your server.

Configuring Express Generator to use Pug instead of Jade

I installed Express Generator for Node.js but when I created an example app, I noticed that Jade is deprecated to Pug. I installed Pug, but I still need to tell express generator to use it each time. I've been reading about the subject and it's telling developers to just change the file names manually, but is there a way for this to work out of the box? How do I do that?

Express defaults to Jade but if you wish to pug as a template engine instead of using Jade.
You must type
express --view=pug myapp
This will create a new application called "myapp" using pug by default.
For a more in dept explanation type
express -h
this will show you the available commands, one of the commands is -v
--view add view support
Reference: https://expressjs.com/en/starter/generator.html

I made two mistakes trying to follow the above docs. It's because I'm still getting used to installing packages locally and globally.
2 Mistakes:
I. npx express-generator
This installed it locally, making express unavailable in the command line terminal.
When I installed it globally, I had access.
II. starting in a folder on Atom, an IDE. Express-generator creates a folder for you, so you start in the terminal outside of a folder, such as your desktop.
9 Steps to solution:
Use the terminal in your desktop directory, not an IDE.
Do not create a folder or any file.
Install express-generator globally, not locally.
sudo npm express-generator
Verify you have access by: express -h
Type: express --view=pug my app
Change directories to myapp folder on desktop
npm install
DEBUG=myapp:* npm start
open your browser to http://127.0.0.1:3000/

I think this issue come when npx express-generator is used alone (for those who have node versions above Node.js 8.2.0).
for node versions 8.2.0 or above,
Navigate to the directory where you want to create the app
npx express-generator --view=pug myapp
This will create a myapp folder in the directory with required .pug
files instead of .jade files
for earlier node versions you can find the required steps here express
application generator documentation

npx express-generator --view=pug install.
this should do the trick

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

How to run sails in watch mode(during development)

I started my new project in sails(express on nodejs). I am currently starting my server using command
sails lift
But whenever I make changes, I need to restart my server. How do I start my server such a way any changes during development are automatically reflected on my localhost website?
Previously I created webserver using mean.io and starting server with command
grunt
used to start server in watch mode.

There is a hook for that for sails >= 0.11:
npm install sails-hook-autoreload
Here is how to configure it:
// [your-sails-app]/config/autoreload.js
module.exports.autoreload = {
active: true,
usePolling: false,
dirs: [
"api/models",
"api/controllers",
"api/services"
]
};
Models, controllers or services will be reloaded without having to relift the app
Alternatively, you could use Forever to start your app.
// In a terminal, from the root directory of your project
forever -w -o log/out.log -e log/err.log app.js
The -w option restarts the app on file changes. You can use a .foreverignore file to exclude some paths:
// [your-sails-app]/.foreverignore
**/.tmp/**
**/views/**
**/assets/**
**/log/**
With this solution, the app will be completely stopped and restarted but you can use it with any version of sails and there is not this limitation from the sails-hook-autoreload documentation:
As for now, it's not possible to add new directories to be reloaded.