Node and react runs on separate ports, for API requests form react app we can proxy to node URL.
I don't need to do react server-side rendering to serve react app, so I build the react app (for every change in react app) and serving build/index.html via node after authentication.
Problem
I build react app for every change.
Is there any workarounds to serve the app via node that is running with live reloading?
Also, anyone knows where is the location of files generated when running react-scripts start , so i can serve from that location, right?
this is just a mad thought.
I would like to know any solutions for this problem?
I figured out to make it work via ngrok and proxy.
Here is the full answer Shopify app with reactjs and nodejs without nextjs?
You may have two folders with client and server application. just command ng init and generate a package.json file in your main folder which contains client and server.
Now command npm install which generate nodemodules folder.
Now edit your package.json as:-
"scripts": {
"client": "cd client && npm start",
"server": "cd server && npm start",
"start": "concurrently - kill-others \"npm run server\" \"npm run client\""
},
"devDependencies": {
"concurrently": "3.5.1"
}
Related
I have a monorepo with two apps:
The web app (Next.js)
The UI library (Tailwind, which uses Microbundle)
The only way I managed to make the web app see the changes I make to the UI library is by:
Making the changes
Rebuild the UI library (in this case, I'm using microbundle watch)
Manually restart the Next.js server
My question is: how can I automatically restart the Next.js server every time the files within ui/dist are recreated (because they are rebuilt every time a change is made)?
You can use nodemon to watch any files and restart a node app, the Next.js app in this instance, when they're modified.
First, create a nodemon.json file in the Next.js project folder with the following contents, replacing the path to your ui/dist folder accordingly.
{
"ignore": ["node_modules", ".next"],
"watch": ["path-to/ui/dist/**/*"],
"ext": "js json",
"exec": "next dev"
}
Then, you'll have to replace your dev script to run nodemon instead.
"scripts": {
"dev": "nodemon",
...
}
I want to keep keys and secrets from showing up to the end-user in the React app final build. I found ways suggesting to keep secrets in the environment variable file in docker.
Below is the code so far which is not working. The REACT_APP_SOME_API is not accessible in React also I am not sure if using this method, secrets will be visible in the final build which I don't want.
Package.json in React:-
"scripts": {
"start": "rm -rf dist && webpack-dev-server --mode development --open --hot --port 8090",
"docker": "rm -rf dist && webpack --mode production && make docker-run",
"docker-push": "rm -rf dist && webpack --mode production && make docker-push --"
},
Makefile:-
docker:
docker build -t app .
docker-run: docker
docker run -it --env-file ./config.env -p "80:80" app
docker-push: TAG ?= latest
docker-push: docker
docker tag $(NAME) $(DOCKER_REPO):$(TAG)
docker push $(DOCKER_REPO):$(TAG)
config.env:-
REACT_APP_SOME_API=This-should-be-accessible-in-react-app
App.js in React app:-
return(
<>{process.env.REACT_APP_SOME_API}< />//This outputs undefined if console.log
);
You should never put an API Key inside a client app in the first place. API keys are meant for server to server communication. If there are some secrets, you can store it inside session storage when the user logs in as a token.
as in React documentation
React apps have no hidden code.You have to write a backend for it (where all hidden parts are) which provides public interface your React app can query.
You can try to obfuscate the code, but you cannot hide it.
That's the reason why some API's require you to also provide a domain for it so it provides another layer of limit about where people can use your API key at, even when published.
If something is utilized by your react application, it can always be accessed by the end-user. Even when talking about programs compiled to assembly, they can still be decompiled.
As a rule of thumb, do not expose API keys which are not supposed to be exposed to the end-users.
Create files for different environment like this inside your source directory like this:
env.dev
env.production
Inside your environment file define different Key like:
REACT_APP_SOME_API="http://test.com"
Run the command to read keys from different file at the time of running:
"start": "sh -ac '. $(pwd)/env.development; rm -rf dist && webpack-dev-server --mode development --open --hot --port 8090'"
You can access the keys inside your application by
process.env.REACT_APP_SOME_API
Hope it helps.
First of all, I'm not after a technique to package my application into a single executable.
I'm curious to find out what is the approach to create a copy of the app within the current project that is ready to be moved to server-enabled location.
Right now my server app is a git repo and it has all the usual files in there, together with the source folder:
./src/server/index.js
Do we simply copy everything that is in the ./src/server folder to ./dist/ then also copy the package.json into ./dist?
Then we copy the contents of the ./dist folder to a location that will be able to serve the application, like /www/app2/ and inside that location, we make sure that we have NODE_ENV=production in the environment and run npm install to pull the production dependencies?
But then, our package.json file would still have the development related scripts and other things we don't need in production?
What is a best-practices way to deploy a NodeJs app?
--- UPDATE ---
This is what I have prototyped so far and it is working:
"scripts": {
"clean:dist": "./node_modules/.bin/rimraf dist",
"prep:dist": "./node_modules/.bin/mkdirp ./dist",
"copy:server": "./node_modules/.bin/ycopy ./src/server/ ./dist/ -r '^((?!tests$).)*$' -i",
"copy:package": "./node_modules/.bin/copyfiles package-production.json ./dist/",
"build": "npm run clean:dist && npm run prep:dist && npm run copy:server",
"start:dev": "nodemon src/server/index.js",
"start:server": "node dist/server/index.js",
"prompt": "echo 'No prompt functionality available'",
"greet": "echo 'Welcome to my project.'"
},
So the idea is to selectively move bits from the dev/src folder to a production ready dist folder. The idea behind having a simple package.json file is that we will not be needing the dev dependencies in there also we will not be needing most of the dev scripts as well. So probably something like the following will be enough:
"scripts": {
"setup:server": "NODE_ENV='production' && npm install"
"start:server": "pm2 start index.js"
}
... or maybe we would like to have some csh/bash scripts inside ./dist/bin that will streamline the start process.
"scripts": {
"start:server": "./bin/launcher"
}
I can definitely see a need for a custom project tree structure existing within the the ./dist folder and totally different to the ./src structure.
I am not sure why the "development" contents of your package.json are a problem, so perhaps I am not getting the crux of your problem. However, for our environment we deploy all of our node apps (primarily microservices) with ansible. The deployment package is just a tarball (could be a zip file). The ansible package includes templates for a config.js file and a pm2 startup.json file that are both customized based on the environment of the target (staging/test vs production).
Let me know if you want a few more details if you are interested in this approach.
I am learning how to use Sails.js and vue.js. So I'm trying to develop a small app where there's a vue.js application located inside the assets/ directory of sails.js. The idea is to serve both applications with the same server (command sails lift), but I'm getting some trouble to make it work.
The reason is because the sails server can serve the index file of my vue app (assets/web/dist/index.html), but other vue resources will 404, because my vue index.html file will ask for addresses like localhost:1337/static/etc instead of localhost:1337/web/dist/static/etc.
So I could make it work running npm run-script build in assets/web (my vue directory) and creating a copy of assets/web/dist in my assets directory. This way my vue app is served by the sails.js dev server. But I have to "compile" vue and copy it everytime I change something. It would be fine for production, but is terrible for developing.
Is there some easy way to develop this application using only one dev server, or should I split them in two apps and serve them separatelly (in dev environment) ?
I'm using sails v1.0.2 and latest bootstrap-vue (currently bootstrap ^4.0.0-beta.2 and vue ^2.5.2)
(it's available in https://github.com/lampsbr/projetao)
You should split it, e. g. frontend/backend directory, and it's better to have different terminal sessions for both servers because if not, it might get messy. In my example project with Vue.js and Sails.js, it's still possible to start both simultaneously. But that's only for very quick changes.
This is how I do it inside the package.json:
"scripts": {
"dev": "cd backend && npm run dev & cd frontend && npm run dev",
"install": "cd frontend && npm i && cd ../backend && npm i && cd .."
},
You have to compile your Vue.js application only when going production and, as you mentioned, it will be pushed into assets directory of Sails.js. That said, only your compiled Vue.js application should be located inside your assets directory, no source files!
Another common approach is to have a client directory inside your Sails.js directory.
I am new for angular and I have requirements to develop a web application with Angular4(Front) + REST API using node js(API connectivity with Ms Sql).
Now my confusion is that is it better if I develop both projects separately or not...?
Personally, I prefer to develop both projects separately.
But I am using the visual studio code as my IDE and with visual studio code, I am able to work only one project at a time.
I want to work on both projects at a time.
Is there any way/any other IDE which can help me out? Or
Is there any way to run two projects at a time in visual studio code...?(I have researched a lot for that but I didn't find any helpful solutions)
Angular CLI has a development proxy configuration option that can be used to intercept calls to a development back-end and route them to the API. This can allow you to work on the projects independently as well as taking advantage of #angular/cli tools.
You'd create a file called proxy.conf.json at the same level as your angular-cli.json file. Let's say your node API in development runs on port 3000 at http://localhost:3000 and your API endpoints are all under path "/api", the contents of proxy.conf.json would look like:
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
You can set up as many intercepts as you need, in this case it would only intercept calls made to "/api" and direct them towards the project running at http://localhost:3000.
You would then need to modify yournpm start in package.json of the angular app command to utilize the proxy:
"scripts": {
...
"start": "ng serve --proxy-config proxy.conf.json",
...
},
Then you would just need to run both the back-end and front-end separately in different command windows. You can use a library such as concurrently to run multiple commands in development with a single npm start. You'd set up your npm start command in the base node API project something like this:
"scripts": {
"start": "concurrently \"./bin/www\" \"cd public && npm start\"",
}
In this example, my node (express) app is activated from ./bin/www and my Angular app is located in the public folder, but that could obviously be different folder depending on your project structure. You're start could be simpler if the backend node api is just a single entry file "start": "concurrently \"node ./server.js" \"cd public && npm start\"".
Sample structure:
Project
server.js (back-end node API)
package.json (concurrently library and command added here)
public (angular front-end app)
src
.angular-cli.json
package.json (npm start updated to use proxy)
proxy.conf.json (proxy configuration goes here)