I am using Cloudflare pages for the first time and I've been trying to understand how my node js project should be started.
Usually, when I work on a server, what I would do is npm install and then npm start. But in Cloudflare pages (serverless) I should run a single command inside the build command box (in the Cloudflare UI).
Adding npm install to the start script of packages.json is not a right solution.
What should be a good solution for my situation?
Is there a place where I can see actual logs better than what the Cloudflare UI offers?
Cloudflare Pages helps you to deploy SPA. So, the build command, it asks for, is used to build the SPA to generate HTML, CSS and JS.
Related
Netlify just as example, same question with CloudFlare Pages etc.
In the past I setup my own server with node and react/vue.
I have my node setup on a server because I don't want to install node and node packages on my local machine.
When I was developing I SSH into the server with port forwarding.
So I ran a dev server on port 8888 (npm run dev) on the server and opened http://localhost:8888 in my local browser.
When I make a change to the files I can immediately see the effects without running npm run build.
I am thinking about using a service like netlify because its the right thing to do? But how can I see the changes I make without actually running build?
Is this even possible or do you use theses service only when you are building a website that rarely changes? I am probably missing something. But not sure how to proceed.
I don't know what's the right way. I am very open to suggestions.
Edit: These services that I mentioned are meant for build only. See answer below. I am still leaving this question so people can post suggestions.
You cannot do this. Those services are only for hosting the build version of your app. You have to develop it locally and push the build to these services.
Why would you even want to run a development version online?
I'm building a small project using Angular 7. When you run
ng serve
and a NodeJS server is spun up to handle requests, does each request block until processing is complete? We are trying to evaluate how effective using this in production would be as opposed to using a more traditional application server.
Run build --prod to generate a "./dist" folder.
Then you have to put that on a web server.
You can use Angular Server Side Rendering (SSR) to run it on a node.js server.
You should not use ng serve for production because it use webpack-dev-server that is build for development only.
Github link
ng serve runs a webpack development server behind the hood.
a development server.
It's made to mimic the production build and see your final application in an esay way.
If you didn't have that command, you would need to run a command like simplehttpserver after rebuilding all of your application on every change.
This is a convenience tool provided by the CLI to ease your development, in no case it's suited for production mode. This is a server without security, without optimization, without performance, without ... Well, without anything that makes a server, a server. By default, it deosn't even make your application accessible outside of your localhost. Not so useful for a production mode ...
So, never, I repeat, never, use this command for your production server.
Run ng build --prod
It will generate minification code in "dist" folder. you have to upload the file content of this "dist" folder. It will give faster response for loading web pages.
For more details please refer Angular deployment guide
When using ng serve, you are spawning a backend nodejs environment with a web server to handle requests towards your angular application. That's great for reloading and quick startup when developing. But needing such resources for static pages is unnecessary.
At the end of the day Angular is just a framework telling you its opinion on how to build an SPA. No matter the framework or library you use, you will always end up with an index.xxx, Javascript files and other resource files from vendors or internally. Only these matters to the browser loading the webpage.
Hence, you need to build your app to generate the static files that will be served (i.e. ng build --prod). Then you have 2 good options:
Choose a web server that will serve the files (i.e. nginx) on a dedicated server (or even container).
Place the files behind a CDN provider. Since they are static, they will be cached and served to a browser requesting them based on its location.
I would opt for #2 as opposed to #1 forcing you to keep running resources (CPU, RAM, HDD) for files that will be requested not that often. I say not often because your SPA will be handling all routes within itself in the client's browser (and minimum once a day will request a cache refresh).
Is there a panel for run node app?
Just have to run it on the server?
Set everything up manually?
Manual installation xngin ,apache ,mongodb , ...
Manual Server Configuration.
Is there a similar panel Vesta?
There are services like Heroku or Digital Ocean where you can get a node server up without having to do a lot of setup (i.e. not touching apache or nginx etc.). I think that's what you're looking for.
https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction
Honestly after creating a social network in React, PHP and mysql I would recommend uploading the build files to a conventional hosting provider. Not only is it cheaper in the long run but it is probably easier to use. You can do this by typing "npm run build" then uploading the files in the build folder to your hosts main directory either manually or by ftp in atom etc... but it's basically depends on your work flow and whether or not you have a dev ops guy on your team.
I'm in a big trouble, I'm a really a noob on React and in the company I work on I propose to code a project that was on pure Javascript to update it to ReactJS,
In this project I can't use a node server And I have been coding React without JSX as shown on this page:
https://facebook.github.io/react/docs/react-without-jsx.html
it's working... but as soon as the project gets more complicated, then gets more complicated to code...
I though I have found a solution to work on JSX without a Node server, that is to code with create-react-app:
https://github.com/facebookincubator/create-react-app
I can code on JSX and then run the command "npm run build" and it generates all the React code in the build folder, and then I tried to run build/index.html, but it doesn't load anything, any idea If what I'm trying to do is it possible?
Once you get things working the right way, I highly recommend you use .jsx. You can hook a frontend to any backend you want. Don't you have an existing index.html file that you can import your React entry file into?
create-react-app has its own way of doing things. If you're updating an existing codebase, you should probably be starting from scratch.
You need a server to host your dist/index.html site. This requires you to build a simple server with either node or some other back end programming language. I believe the reason it works whenever you use create-react-app it is because when you npm start create-react-app runs a simple server to host your application. Why can't you use a node server?
I'm currently moving on with reading about node. I'm getting through the tutorials well using the command line. However I am thinking ahead and I want to create a simple register, log in and log out website.
Where would I place the node files on a server (all examples I see run from local host:3000)?
What is the best tutorial for creating this type of website from scratch with node?
Thanks in advance!
It doesn't really matter where you put the files on the server. The localhost:3000 bit comes from the fact that your core server file tells the server to listen on that port.
I would recommend using the express-generator from npm. It's pretty versatile and does a lot of the leg work.
Just run the following:
npm install express-generator
After installing, you'll need to just run the following to create a new web app:
express
The details are here: http://expressjs.com/starter/generator.html.
Also, try to read through and understand all of the pre-provided code.