I am trying to figure out how I can convert an existing express.js app into a mobile app using Apache Cordova. Currently, I can go into the root directory of my express app and run "node index.js", then I can view the current WebSite at http://localhost. So what I want to do is convert that WebSite into an app I can run on a mobile android device or ios. I have read many tutorials on using Apache Cordova, but none of them seem to work with express.
Express, runs a server in the back end. It does not automatically translate to Cordova which is a front end platform. You would need to call your express server from Cordova using AJAX (JQuery, xhr, AngularJS, etc...) and, then, render the website using Cordova.
AJAX Call with JQuery:
$.ajax({
type: "GET",
url: `http://localhost/your/path/goes/here`,
success: function (data) {
// render html and/or data
}, error: function (err) {
// throw error (or do something with it)
}
});
Also, not trying to be harsh, but anything you put on: http://localhost, cannot be accessed by people who are not on your computer (unless you give them your ip address and are running the website), please post any relevant code and/or error messages in the future so others can help you.
Relevant links which expound upon my answer:
Cordova and express js?
How to convert node.js application into cordova
You can refer to here: https://github.com/maximegris/express-cordova-sample for an example (not my GitHub)
If you want to run express from your phone (making your phone a server):
https://www.sitepoint.com/how-to-run-node-js-with-express-on-mobile-devices/
Related
Hi even after lot of search i am still confused what is correct way to deploy my react app created using create-react-app with express as backend.
I ran npm run build which created build folder. I copied the build folder to be served as static folder of express and had put
app.use(express.static('build'));.
It is working fine for homepage, that is homepage opens when i run my express node server but when i go to anyother link outside homepage it gives 404.
Everything is working fine in developer mode, which i run by npm start command. I just want to know what i am doing wrond here. Let me know anymore info required to understand the problem. Thankyou.
It sounds like you don't have the backend server running. You need to npm start your server, and then npm start your front end if that make sense. They are 2 separate things.
Are you using client-side routing? A popular implementation of that is react-router.
Let say you are trying to access /page1, what client-side routing does is use the JS to toggle between different components to "fake" the routing, instead of rending a new HTML.
Yet, by default when you change routes, the browser does the usual stuff and send a GET request to the server asking for the corresponding HTML file. But since you only have index.html served, that's why you received 404.
You need to add the following at the end of your app.js, right before you call app.listen of your express server to tell the server to always return index.html no matter what route does it received.
/* client-side routing.
* For GET requests from any routes (other than those which is specified above),
* send the file "index.html" to the client-side from the folder "build"
*/
app.get("*", (_, res) => res.sendFile("index.html", { root: "build" }));
// your usual app.listen
app.listen(port, () => console.log("Listening"));
I'm currently testing a React front-end application with TestCafe. Current environment is:
React: 16.3.2
Node: 8.10.0
TestCafe: 0.23.0
MacOS Mojave 10.14.1
We've written about 65 tests which all run great. We've introduced a Single Sign On component into our application which has posed some automation challenges. Instead of trying to drive TestCafe against our app AND this particular SSO provider, we're using a fake API call instead.
Simplified order of operations for the app during normal usage is:
React app starts, detects no SSO credentials
Environmental service provides app with a proper SSO URL, react app redirects user to SSO login page using window.location
User logs in and SSO redirects back to our react app with a an additional URL query param & respective value.
React app proceeds forward in a 'logged in' state
Pretty basic stuff.
When the React app is being tested, we just provide different URLs which point to a local ExpressJS instance on localhost:3002. When the React app performs a window.location to the fake SSO API (http://localhost:3002/fakeOAuth) the ExpressJS instance simply performs a response.redirect(http://localhost:3000/?sso=fakeCode) and now we are back to our React app with the additional synthetic SSO data. This scheme works great when not being driven by TestCafe.
When we drive the React app via TestCafe, TestCafe hangs when returning back from the fake SSO call to the React app. After this hang, we have to forcefully kill TestCafe on the command line with a ctrl-c.
Using chrome debug tools and looking at the console output, there is a message:
Uncaught TypeError: __get$ is not a function
at hotCreateRequire (bundle.js:73)
at bundle.js:719
at bundle.js:722
and a screenshot can be found at the end of this post below.
The Test code:
import { Selector } from 'testcafe'
fixture 'Landing Page Body Tests'
.page 'localhost:3000'
test ('Displays correct main welcome title', async t => {
const landingPage = Selector('.card-title')
await t
.expect((landingPage).innerText).eql('Welcome, Fakeuser', 'Incorrect Username Found')
})
Screenshot of TestCafe failure
Does anyone have any ideas as to why TestCafe crashes? I have reworked the test a few times, researched and experimented with using TestCafe's Roles and ClientFunction classes but to no avail. Any input would be greatly appreciated.
It looks like a bug in TestCafe. The __get$function is an internal TestCafe function, and the __get$ is not a function error means that TestCafe wasn't able to process your page properly and install its internal functions in the global window object.
I suggest that you create a new bug report in the TestCafe repository, and provide a HAR report and an example that can be used to reproduce the problem.
I am new in programmation and i follow a tutorial in udemy to create my restful API with express JS.
I have almost finished my API and i want to integrate it in a new angular 5/6 project.
I have tried a lot of tutorials but i cannot launch my express project in an angular project to make a request with postman.
could you show me please ?
Here is my express project
You don't really need to "integrate" your NodeJs app with an Angular application.
You make a NodeJS REST API as you would with any other technology and run it separately on a certain port (Default is 3000 for NodeJS)
Run it with the command node app.js.
Then you make an Angular application, that connects to your API as if it would to any other page. A HTTP call inside a service to your specified link.
public contactAPI(){
var uri = 'localhost:3000'; //Or whatever the link is for your node server
return this.http.get(uri);
}
I have an express server that serves my angular front end at http://localhost:9000
I'm using electron as a desktop client.
I want to force users to view the application through electron and only through electron. I don't want users to have the ability to browser the application through any other browser.
Is there any way to disable the ability to access the app through a regular browser?
I've attempted to find information regarding this but have come up short.
EDIT: This can only be done on the client side
You can check if the window.process object exists.
if (window.process && window.process !== undefined) {
// Likely electron
}
I don't know if it's related, but is it possible for you not to use localhost? I found that after building angular parts (with ng run build) and referencing them in electron's main.js there was no need for local server to be running (but so far I only stuffed angular's quickstart into electron shell)
Hi I have a node based server api, and have created a simple web app using angular 2.But I don't understand how to integrate both. I have done a little research but most of the websites are only offering how to built angular 2 application and no one offers node integration.
Notice that Nodejs is simple server-side Javascript, so you have to follow one of these approches:
Server side web app:
In this case all pages (and functionality) will render in server-side. You can find lots of framework for doing that. So you need no client-side framework like angularjs.
Client side web app + server side api: I think that is something you need. Server side api has build as rest api service and serves all your business functionality. In client-side angular just consumes these services. All client based functionally will handle with angularjs (like routing, async service call, manages states and etc)
Or if your question is how comminucate with node-js rest api look at this page: angular2 http
You can install any web server for angular like apache or nginx. For example u're using apache, when you run apache you can access angular web through http://localhost/project.
Follow this tutorial on how to install and run nodejs http://blog.modulus.io/absolute-beginners-guide-to-nodejs on window. On mac https://shapeshed.com/setting-up-nodejs-and-npm-on-mac-osx/
You can call node server using REST API.
In your angular service for example :
$http.get('http://project/rest/getData', succFn).then(function (res) {
return succFn(res.data);
}, 'error');
In nodejs (REST Server) :
apiRoutes.get('/getData', function (req, res) {
// Return any data to client
res.json({
'code': '00',
'content': 'Return dummy or json here',
'remarks': 'Success'
});
}