How to prevent minified scripts in React production? - javascript

We have an API that we host via nginx on localhost:3128. That API serves all of our JS/HTML as well as our various service endpoints.
If I run yarn start that will run on port 3000, which means that our fetch requests also go to port 3000, and that won't work since the endpoints are all on 3128.
My plan was to instead run a build, and then upload to our serving API behind nginx for testing. The problem is that yarn build transforms our human readable typescript into minified, compiled javascript. This makes my stack traces and debugging harder.
How can I solve this problem?

General solution to this would be to create some proxy that would redirect your requests from :3000 to :3128. If you use CRA, you can declare proxy in package.json or setupProxy.js.
If you don't use CRA, but use webpack, it is made in similar fashion with webpack-dev-server.

Related

Why is server.js never built in Webpack?

I am using Vue.js 3 for my front end, and Node/Express on the back-end. I am trying to enable server side rendering which is proving difficult.
I understand the client-side is built into a file called app.js. However I never see server.js being built and exported to the dist folder? Here are some examples:
vue-hackernews where there is an entry-client.js and entry-server.js file being provided to Webpack, but server.js is not anywhere to be seen.
Another question/answer also only provides main.server.js as the server entry file and does not build server.js.
It is my understanding that server.js is the back-end and has to run for Node.js/Express to work. In the above two examples what exactly is being built from the server entry files because it doesn't seem to be server.js where the Express routes live. Surely server.js must be built to the dist folder so that it can be accessed and run by a web server like Windows IIS for example (which I am using)?
You are correct, usually there is no need to bundle the server code.
But there are some benefits from doing so:
One project wide configuration, must of the client & server config can be shared - no need to maintain multiple build tools
Server code HMR (Hot Module Replacement)- you can swap your server code during dev without the need to restart the server
Code sharing between client & server
Code transpilation - server code can be written in modern syntax (ESM etc...) and it will be transpiled to the target node version.

How to Deploy NuxtJS Project on Shared Hosting?

I developed a NuxtJS project locally and am trying to figure out how to deploy my project to a shared hosting provider list Host Gator.
I want to use the server side rendering functionality of NuxtJS so I will need to run
npm run build
But once I do that I'm not sure the correct steps to then deploy that built project to shared hosting?
As #AlexanderStaroselsky says, you will not be able to deploy successfully to shared hosting although it isn't because you can't run node, you probably can, it is because you can't run a reverse proxy once you deploy. I once foolishly tried to deploy a nuxt app to Godaddy shared hosting and it was a total nightmare.
I gained shell access and installed node and transferred all the files and ran npm run build and then npm start. All of this went fine and then was confronted with the issue of how to direct traffic to the nuxt app. On shared hosting you use a .htaccess file to direct to index.php or index.html but you need to make the rewrite rule to direct to http://localhost:3000 which you can put into your rewrite rule but it seems to block the correct functioning of the app. I was able to get the app visible but it didn't have any functionality. The routing didn't work, any images sourced through require('~/assets/images/...') didn't display and it was totally unworkable.
What you need is to be able to install nginx to set a reverse proxy and shared hosting never offers root privileges for you to be able to install it. What you need is a cloud hosting provider which gives you a virtual server with full root privileges to install nginx, node, and any other packages you might want. There are plenty of them out there that are affordable (probably more so than shared hosting) and easy to use, such as digitalocean, aws, google cloud, upcloud and so forth.
There can be a bit involved in deploying a nuxt app especially if you are using a rest api and then more so if you wish to add an ssl certificate but there is documentation out there to do it.
All that said, if by some miracle you ever find a way to successfully deploy to shared hosting let me know and I can dust off my godaddy account that I stupidly paid for several years worth of and don't use.

NodeJS server side application deployment cosiderations

I am writing a nodejs application with Angular as my front end.
For this I am having Git as my code management server.
For client, I am doing minification and it is ready for production.
But I am not sure, how to prepare server side files for production.
Do we need to just copy all the Git folders into production server?.
Let me know the best way to deploy nodejs server application.
You could use pm2 as your daemon to keep your nodejs app up all the time.
Try not to include node_modules in the repo, cause different machines have different setups/installations, you cannot tell if one package would work before you run it unless you npm install them.
If you are familiar with Docker, use it, pre-bundle all (include node_modules) files into the docker image, and you do not need pm2 here, Docker itself can restart automatically. This is the ideal approach.
It really depends on how you (or your company) want to organize the workflow and the size of the project.
Sometimes I too use a GIT repository, because then is really simple to update: just a git pull and (if server files got edits) a pm2 restart N command.
In this way, you dont have to install the whole development stack in order to compile (and minify) the bundles - I guess you work on your local machine where all the development tools are installed.
Keep in mind to use the --dev flag while installing packages that are only required in development mode, so you can keep the production server as slim as possible.
A good practice I found is to add some random tokens inside the final bundle filename (both for js and css) that get then injected inside the final html static files, to avoid the refresh the page loop.
Once you have the bundle files on your dev machine, just upload them to the server (ftp, git, rsync, sshfs mount, whatever you like) and (if server files got edits) restart/reload the node process (Im using pm2 for this, its really great). If you only edited client files, no reload is needed.
Starting from here, there a lot of ways more or less sophisticated to do the job, like git pipelines for example.. but depends on the situation.
Edit: this is a good article about task runner (gulp vs grunt vs vanilla npm), while may be a little off topic, it analyze some aspect of the common deployment process

How can i deploy the Webpack Application using webpack dev server?

I have been building my application on web pack and testing using web pack. My biggest concerned is how can deploy it after the application is complete?
Do i need to use the 'Webpack' dev server for production or just deploy direct my 'dist' folder to production.
No, you should not use webpack dev server on prod, and it's particularly said in docs. Yes, you should make a build with webpack, probably using another config (or having conditions in your config, e.g. depending on ENV variables). For example, you would probably want to run minifiers, or hash your files for cache busting. And then you just upload dist to your webserver (if you don't use any CI tools of course, in that case you should run a build there) and run apache, nginx or anything else there.

What's the most common set up for running Node.js and Express.js in a production environment? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
So as a developer I've mostly worked with PHP for the back end (running on Apache) and using HTML, CSS and JavaScript on the Front End. Now I've begun to dip my toes into the work of Node.js, Express.js and Angular.js.
So I'm curious how would you set up Node and Express in a production environment. I know Node is not a Web server although it can serve files, but what does a typical production environment for this stack look like?
Thanks so much in advance.
Floyd
Your question is quite broad. I'll give you an idea of how I setup everything using digital ocean as an example.
Deployment
Digital ocean setup guide
The important part is that nginx will be your reverse proxy. Once you've done this, remember to:
Not leave any console.logs() inside your code. They are synchronous methods and will slow down the code.
Set the environment variable node_env to production.
Serve static files from nginx if possible.
Use helmet middleware for express for security.
Resolve www vs non-www at the nginx layer.
You will still need to install mongodb, rethinkdb, etc seperately. If you wish you can also use a database service provider like mongolab.
Scaling
The above mentioned setup is pretty alright for most websites but if you are hitting speed bottlenecks or your app is crashing, you may want to use:
toobusy. Its a middleware to send away requests when the load is too high.
Check the order of your routes. Ideally app.use(express.static()); should be just before your 404 handler.
Or serve static assets from s3 or somewhere else.
Look up the cluster module. There are packages which make it easier to use though.
Use cloudflare for dns. Highly recommended.
Use varnish for cache.
Notes:
Other people have pointed out that you can use nodejs by itself without nginx. However most people recommend using nginx in production environments. Heck some providers like appfog have nginx as a default.
All the packages you named are available through Node Package Manager (NPM). NPM usually comes with node, and is pretty much essential for all Node.js projects. You can install apps like
npm install express
Which installs express and all its dependencies. And if you want to be able to replicate your environment on any computer, run
npm init
and add --save flag to all install commands. This adds it to a file called package.json, and the next time you want to install everything from scratch, you can include your package.json, and just run
npm install
in the directory.
Having asked this question and not getting a perfect example I would like to explain this with more hardware oriented way(that's how production works. On real servers).
Let's say you have a droplet a $5 one from the digital ocean with ubuntu installed on it and nothing else.
You buy a domain name(www.example.com). You buy a server from any company. They give you an IP address(let us say 12.133.222.59). Now you must be running your node app on let's say port 8000. You run it by typing node app.js and then go to the browser and run localhost:8000. Your app is now running. Excellent. Now what you need to do it is put your app on the server and run it so it will run on 12.133.222.59:8000 but that's not how you want it. You want it like www.example.com and it should open up the localhost:8000 page for you am I right?
If yes. You need to link www.example.com with 12.133.222.59:8000.
How you do that. Well, there are many ways. I like the easy one. Which according to me is using Nginx. It will serve your web application at a particular address, which much setup.
Now how to use Nginx to do that is beyond the scope of the question. But if you want me to continue i will.

Categories

Resources