I am using 'create-react-app' npm from React starter https://github.com/Microsoft/TypeScript-React-Starter,
How do I have different config files for different environments (e.g. Dev, CI, production)? I want to store the endpoints, some app settings in those config files.
The only way that I can think of is to eject the project (npm run eject) and create the config json file using web pack.
Is there any better way to handle the different config files with 'create-react-app' npm? Thanks.
Related
We have just a single webpage with some links on clicking them it will redirect to different sources. As of now we are using "npm run build" to create the production package.
But because of the build files having dependencies with node, i cannot host it in a particular server.
Is there a way to create the Reactjs production build without using node ?
I suggest using Netlify to host your react app easily .
Below are some resources that can help you along the way.
https://www.netlify.com/with/react/
https://www.youtube.com/watch?v=sGBdp9r2GSg
You can have a build and upload it manually to your Netlify account,
You can use the CLI (netlify-cli) or you can your account to git .
Similar approach can be followed with git pages for example.
What packages do you have in your package.json file? Did you use a React project template that uses Node server-side features? It seems like you want to host your React project statically, not necessarily get rid of Node and npm.
For example, I've worked on lots of React projects using npm and create-react-app that we were able to host with a .NET backend and Microsoft IIS (instead of Node). The output is .html, .js, and other static files that you can host anywhere.
When you build a react app, the files at folder build contains everything it needs to run
If your hosting server hasn't integration with CI/CD, then you must deploy manually only the build folder, not the root folder (the folder that contains package.json).
I believe your issue is just a confusion/misunderstanding on how react works, how to deploy it, and how to run it.
React needs to be built on an environment where node, npm, and other tools are available. It can be on a build server or in your local machine.
After built, react app is just a folder with a bunch of html, css, js files which will run on the client browser, so, there's no dependency on NODE anymore.
These static files must be served with a simple static file server (apache, nginx, iis, etc),
I recommend you build the app locally on your machine and then deploy manually to your host through ftp, ssh or web interface.
If react is overkill to your needs, then don't use it.
The best approach is to host it in a cloud service that can do the full CI/CD integrated with git, all automated (Google GCP, AWS, Azure, Netlify, etc)
I have a nodejs project which is using nodemon for providing environment variables when running locally. I have a need to have the developers easily switch between two different nodemon config files (two different sets of environment variables). But I can't see a way to specify a config file for nodemon. How can I accomplish this.
You can specify the config file using the --config flag:
https://github.com/remy/nodemon#config-files
I'm new in Angular and NodeJS. I finished all the basic documentation, and now I'm doing tutorials. My question is about the architecture.
Following the angular tutorial, you create a new server:
ng new new-project
That creates a whole server listening to port 4200, you learn and work with angular, learn about directives, etc.
Then you create a server with node, configure routes, etc.
But how these two servers live together?
What do you recommend me to join them?
This is a node server. The angular part are just two files
This is the server created with ng serve. The angular part is so much complicated
Angular project is not a server. Angular is framework to create front-end page/app. Angular-cli command ng serve is used to build application and start a web server on localhost.
When you build your page with angular use angular-cli command ng build --prod to build your page ( more info about ng build command). The build artifacts will be stored in the dist/ directory of your project.
If you want to host angular page with node - copy file from projektFolder/dist to catalog when node can have access to copy files. In node you can use express library to host static files:
app.use('/myangularproject', express.static('myangularproject')) //host static files`
More info about hosted static files in node and express
EDIT
You use Angular CLI to build an angular application. This is an additional tool for working with angular and you do not have to use it.
Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box
ng serve
ng serve is a tool from angular cli. When you call this command your project is build in memory and serve it via webpack-dev-server. It is used for quick preview and development of the project. If this command is confusing for you then you can use the npm script npm start.
The CLI supports running a live browser reload experience to users by running ng serve. This will compile the application upon file saves and reload the browser with the newly compiled application. This is done by hosting the application in memory and serving it via webpack-dev-server. doc
ng build
ng build compiles the application into an output directory.
Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
When you use command ng new Angular CLI add all necessary files to develop your application. Some of them are used to configure the project e.g tslint.json, tsconfig.json, angular.json ... Do not host these files only result files from the use of the ng build command (/dist directory).
Angular CLI compiles your project into several files (try ng build and look how many files do you have in /dist. You must host all of them. These are static files. You do not need a special server like php files. You can host them using a regular file server. I don't know what you concern use in the node to host static files. If they use express you can use express.static(). More info at the top.
Perhaps this is a silly question. It came out while I was learning how to set up a Node.js application for production on Ubuntu and digital ocean.
Let's say I have a simple data visualization app made in Node.js, using node modules such as express, page, axios, yo-yo, and browserify to compile my files.
I want to upload my app to a webhost that already exists.
This is the structure's app:
node_modules
public (app.js and app.css)
src (header, home, and footer folders)
views (index.pug file)
gulpfile.js
index.scss
package.json
server.js
Which files I need to upload in order to see my app as I see it in localhost?
You need to upload everything.
What Maximelian says is true if you're going to run npm install again on your server. The standard way of doing this is sync the project using git (you can find a .gitignore template for node.js here).
Once setup you'd do something like this on the server after making the commit locally, and pushing to your remote git repo:
git pull
npm install
npm start
If you were to just ftp the full working project including node_modules it would work just by running npm start. But the above method is what I'd recommend.
If I remember correctly everything except node_modules, if you did not customized them. (rewrite some behavior after module installation)
I am new to Node.js programming and I have recently created a sample working web application using (express, backbone & other complimentary view technologies, with mongoDB). Now i am at a point where I want to deploy the same on a staging environment and I am not sure how to package this application and distribute the same. [I can take care of mongoDb and setting it up seperately]
I am from Java world and in there we create jars for reusable libs and war/ear packages for web applications which is deployed in a servlet container. Now in this case since node.js itself acts as a web container as well, how do i package my webapp?
Is there any standard format/guidelines of packaging node webapps built using express? (Is there a similar jar/war packaging systems for node apps?)
How do I deploy it once packaged? Would it become an exe, since it is also its own container?
PS: As of now I am thinking of just manually copying all the required source files into the staging environment and run npm commands to download all dependencies on that machine and then use 'forever' or some other mechanism to run my server.js. (Also, add some sort of monitoring, just in case app crashes and forever fails) I am not sure if that is the right way? I am sure there must be some standardized way of addressing this problem.
Deploying Node.js applications is very easy stuff. In maven, there is pom.xml. Related concept in Node.js is package.json. You can state your dependencies on package.json. You can also do environmental setup on package.json. For example, in dev environment you can say that
I want to run unit tests.
but in production;
I want to skip unit tests.
You have local repositories for maven under .m2 folder. In Node.js, there is node_modules folder under your Node.js project. You can see module folders with its name.
Let's come to the grunt part of this answer. Grunt is a task manager for your frontend assets, html, javascript, css. For example, before deployment you can minify html, css, javascript even images. You can also put grunt task run functions in package.json.
If you want to look at a sample application, you can find an example blog application here. Check folder structure and package.json for reference.
For deployment, I suggest you heroku deployment for startup applciations. You can find howto here. This is simple git based deployment.
On project running part, simply set your environment NODE_ENV=development and node app.js. Here app.js is in your project.
Here is relative concept for java and nodejs;
maven clean install => npm install
.m2 folder => node_modules(Under project folder)
mvn test => npm test(test section on package.json)
junit, powermock, ... => mocha, node-unit, ...
Spring MVC => Express.JS
pom.xml => package.json
import package => require('module_name')
There is no standardized way, but you're on the right track. If your package.json is up to date and well kept, you can just copy/zip/clone your app directory to the production system, excluding the node_modules.
On your production system, run
npm install to install your dependencies, npm test if you have tests and finally NODE_ENV=production node server.js
Some recent slides I considered to be quite helpful that also include the topic of wrappers like forever, can be found here.
Hope this might be helpful for somebody looking for the solution,Packaging of Node js apps can be done using "npm pack" command.It creates a zip file of your application which can be run in production/staging environment.
Is there any standard format/guidelines of packaging node webapps
built using express? (Is there a similar jar/war packaging systems for
node apps?)
Yes, the CommonJS Packages specification:
This specification describes the CommonJS package format for
distributing CommonJS programs and libraries. A CommonJS package is a
cohesive wrapping of a collection of modules, code and other assets
into a single form. It provides the basis for convenient delivery,
installation and management of CommonJS components.
For your next question:
2. How do I deploy it once packaged? Would it become an exe, since it is also its own container?
I second Hüseyin's suggestion to deploy on Heroku for production. For development and staging I use Node-Appliance with VirtualBox and Amazon EC2, respectively:
This program takes a Debian machine built by build-debian-cloud or
Debian-VirtualBox-Appliance and turns it into a Node.js "appliance",
capable of running a Node application deployed via git.
Your webapp will not become an exe.
few ways to approach this:
Push your code into Git repository, excluding everything that isn't your code (node_modules/**), then pull it in your staging environment, run npm install to restore all dependencies
create an NPM package out of it , install it via npm in your staging environment (this should also take care of all of the dependencies)
manual copy/ssh files to your staging environment (this can be automated with Grunt), than restore your dependencies via npm
I used zeit's pkg module. It can create cross platform deliverables for linux/win/macos. Actually used it in production and works fine without any issues.
It takes in all the js scripts and packages it into a single file.
The reason I used it is because it helps in securing your source code. That way in production at customers environment they will have access to application but not the source code.
Also one of the advantages is that at production environment, you do not actually need to have the customer install node.js as the node binaries also get packaged inside the build.
https://www.npmjs.com/package/pkg