I have an app using React that interfaces to a REST server via axios. The REST server (flask) is on the same machine that is serving the build of the JS project. The project being served is the output of npm run build. npm serve is then used to deploy this package. The web interface is then viewed from a remote machine of a different IP.
The issue I have encountered is that the IP of the machine that is serving the site and the REST API may change. How to I go about changing the IP that axios is calling dynamically? At the moment I have a script that searches for the IP string in the js build and replaces it with the machines current IP.
Using utilities like ip have only been returning localhost. I guess I need to find a way to get the IP of who is serving the script?
You can make use of env variables to solve these issues. One popular way is to use cross-env. Your package.json file would have a build command in the script section. You'll have to modify these to add the required configs as environment variables and use it in the code where required.
Example:
{
"scripts": {
"build:prod": "cross-env API_URL=http://myserverip.com NODE_ENV=production webpack --config build/webpack.config.js",
"build:dev": "cross-env API_URL=http://localhost:8000 NODE_ENV=development webpack --config build/webpack.config.js"
}
}
Then you can use different commands to build them. To build prod run npm run build:prod. To build dev run npm run build:dev.
In your code, you can use process.env.API_URL(in place where you write ip address/hostname) which will have different values based on the build. To allow webpack to replace these env variables, use webpack Define plugin as
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
API_URL: JSON.stringify(process.env.API_URL),
}
})
If the REST server and the API share a common server, you could just omit the IP address entirely, so instead of
axios.get('http://123.4.567.89/user?ID=12345')
you can just
axios.get('/user?ID=12345')
Other than that, using DNS is usually a better way:
axios.get('http://my.domain/user?ID=12345')
Related
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 try to search this question by google.But not helpful for me.
I hava a demo of create-react-app.
Run it in localhost(npm start), that work well when browser disable cache.for example:
localhost
The step was run npm run build in localhost.then scp -r build server:/home/deploy/app/.run it by nginx.
Then open the browser to run,that initialization or refresh slowly when disable cache too. for example:
server
you could find load 500KB js file need 15seconds in server.
I guess that is a relationship with bandwidth. My server bandwidth was 1M/s.but i'm not sure.
ps: I'm sorry I forgot to declare the specific environment, but I did these steps.
If you're running this in production, I wouldn't suggest you running the web-application with npm start on the server.
A much better solution would be to run npm run-script build by which you'd get a response as such:
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
48.12 KB build/static/js/main.9fdf0e48.js
288 B build/static/css/main.cacbacc7.css
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
sudo npm install -g serve
serve -s build
You could either do serve -s build or set up nginx or apache to serve the files (it's just html, css and js). You could also use Github Pages to host it.
Are you missing the build step?
If yes, try npm run build or yarn build. It will output an optimized version of your app to ./build directory. You can then host it on your server with nginx or other server setup.
More info here: official docs
When you do npm start npm starts the development version of your app.
It includes some debug code, error checking and live refresh.
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)
I created an express-based backend (in folder A) and a related react-based front-end project (in folder B) respectively. Now I put B inside A for the following benefits:
I don't need to copy files from font-end build to server project anymore because A/server.js can serve files from A/B/build directly.
No need to worry about the cross origin request errors.
They look like one project and are easier to manage in GitHub.
But can I run npm run buildjs from folder A, which actually runs npm run build in folder B? I guess it has much to do with the npm run-script usage.
This can be done using --prefix <path>. From folder A:
npm run --prefix ./B build
You could add the following to A/package.json:
{
...
"scripts": {
"buildjs": "npm run --prefix ./B build"
},
...
}
copy is not a problem, just make it be automatic. Introduce a deployment step is not bad.
there will not be any cross origin problem because you are serving front-end as static files. or at least the cross origin problem should do no matter with it
people first. split or not split projects, depends on developers
I've made my first Angular2 application, while using ng servefor hosting. Now I've to add some backend(because I need some small server logic).
I've found this who basically explain me how to host an angular 2 app on nodeJs. But ng serve was doing a lot of things, checking the changes, bundling the differents JS/CSS files, injecting angular into my template, getting my dependencies.
I cannot just "generate" angular web site and then, since I've to update the angular part to get the data from the web api and work with it.
So what should I do to switch from ng serve to an nodeJS?
EDIT:
Viewing the answer, I must not have been clear enough.
My angular JS is not an application that will on client ONLY, I've done some part of it(navigation, some form, ...) but now I need to host a server with web service and websocket to continue the work. It's not about deploying this to a productive server. It's about to moving to an environnement that allow me to work on the server and the client side.
I think I finally understood your question:
Instead of using the devserver bundled with angular-cli (ng serve), you want to use your own Node.js-powered server.
Also, you DON'T WANT TO STATICALLY BUILD your app (ng build). You want to serve the live build (which has to be generated automatically by the server).
Here's how you can do it:
1) Watch, transpile, bundle...
Webpack is perfect for that.
Create a webpack config file with the right settings for an Angular app. Here's an example from angular2-webpack-starter: webpack.dev.js.
The example is bit verbose. Just keep in mind the config file is where you tell webpack how to handle .ts files, what bundle(s) it should generate, etc.
2) Serve the bundle(s) generated by webpack with a Node.js server
I see two options, depending on how much control you want:
2a. Use webpack-dev-server (not a lot of control)
webpack-dev-server --config config/webpack.dev.js --watch src/
You can see that the webpack-dev-server uses the config file previously mentioned.
Again, you can see an example of the full command to run in angular2-webpack-starter's package.json file.
2b. Create your own server (a lot of control)
You could create a Node.js/Express server using the webpack-dev-middleware, to which you would feed the config file created in step #1.
The middleware is the magic link that will let you serve the files emitted from webpack over the Express server.
Example of a Node.js/Express server which uses the webpack-dev-middleware: srcServer.js.
Does that answer your question?
I know this is an old question but I am just having this same concern and I found ngserve proxy option useful. In development you can run node on another port then calls to /api get redirected through to node.js.
https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md
package.json gets:
"start": "ng serve --proxy-config proxy.conf.json",
then make a proxy.conf.json file like this
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
run ng build --prod to build your application.
After building the application, you will find your final dist code in dist directory.
Now, use this code in your server.js file in Node.js.
(function() {
const express = require("express");
const app = express();
app.use(express.static(__dirname + "/dist"));
app.listen(80);
console.log("port" + 80);
})();
I'm not sure if this is still relevant, but this might help others get a quick start:
Run your NodeJS server part e.g. like this
nodemon server.js
Open 2nd terminal (in VSCode Ctrl+Shift`) and start client part build & watch
ng build --watch
They will continue to work in parallel, each doing it's own job. This is not exactly the same as ng serve, e.g. this will not reflect your changes immediately inside the page, you still have to hit F5 (which you most probably did anyway before Angular). But this is fast, free and much easier than becoming web-pack guru. And you are still able to switch between terminals to check for any output / errors.
Angular app is a HTML 5 app. So you just need to serve it as a static file in NoeJs.
How
Build your app
ng build --prod
This command will create a folder named dist. The folder content is your HTML app.
Serving your app
Just serve it with your NodeJs app pointing to the index.html file.
ng serve is only for development. It is not intended as a production web server.
ng build --prod --aot --no-sourcemap will bundle your application ready for production and place it in your dist/ directory.
If you want to use Node.js you can use Express with the static file middleware. You will probably also want a RewriteRule middleware to support serverside HTML5 Pushstate.
In reality you don't need NodeJS to serve your built site as it will just be flat files. Nginx, Apache or IIS with rewrite rules to support HTML5 Pushstate will be enough.