How to connect an EmberJS front-end with an NodeJS Express API? - javascript

I'm working on a MEEN-stack (MySQL, EmberJS, Express, and NodeJS) project. I have never worked with Ember at all. My only front-end experience is jQuery.
The project is separated into folders, with the front-end (Ember) in one folder and the Express API in another. Front-end will handling loading in web-pages while sending requests to Express API for database requests / authentication / more.
I am currently able to connect the two servers via an explicit URL with jQuery's Ajax method in a webpage's static javascript file (along with allowing CORS and modifying the Ember environment file in app/config).
My confusion is that there is definitely a more elegant solution for connecting the two, but I'm lost on how to go about it.
From looking at tutorials, I have attempted adding an application.js file in the Ember Front-End app/adapters folder:
import DS from "ember-data";
export default DS.RESTAdapter.extend({
host: 'http://localhost:9029',
namespace: 'api'
});
But I don't have the knowledge to fully implement it or test it. What am I missing? How do I take advantage of the adapter file?

When you start ember use:
ember server --proxy 'http://localhost:9029'
Assuming that you node server is serving your api from http://localhost:9029 as you start the ember server with the proxy the ember-cli will spin up a very simple node proxy that will proxy your requests while you are developing.
Then you can remove the host from your adapter.js file
import DS from "ember-data";
export default DS.RESTAdapter.extend({
namespace: 'api'
});
Also if you want brevity:
ember s -pxy 'http://<YOUR LOCAL SERVER AND PORT>'

Related

registering socket IO to vite for sveltekit

I have written a few apps using svelte and sapper and thought I would give sveltekit a go.
All in all it works, but I am now running into the issue of registering a worker on ther server.
Basically I am trying to add socket.io to my app because I want to be able to send and receive data from the server. With sapper this wasn't really an issue because you had the server.js file where you could connect socket.io to the polka/express server. But I cannot find any equivalent in sveltekit and vite.
I experimented a bit and I can create a new socket.io server in a route, but that will lead to a bunch of new problems, such as it being on a separate port and causing cors issues.
So I am wondering is this possible with sveltekit and how do you get access to the underlying server?
The #sveltejs/adapter-node also builds express/polka compatible middleware which is exposed as build/middelwares.js which you can import into a custom /server.cjs:
const {
assetsMiddleware,
prerenderedMiddleware,
kitMiddleware,
} = require("./build/middlewares.js");
...
app.use(assetsMiddleware, prerenderedMiddleware, kitMiddleware);
The node adaptor also has an entryPoint option, which allows bundling the custom server into the build, but I ran into issues using this approach.
Adapters are not used during development (aka npx svelte-kit dev).
But using the svelte.config.js you're able to inject socket.io into the vite server:
...
kit: {
...
vite: {
plugins: [
{
name: "sveltekit-socket-io",
configureServer(server) {
const io = new Server(server.httpServer);
...
},
},
],
},
},
Note: the dev server needs to be restarted to apply changes in the server code.
You could use entr to automate that.
You cannot connect to a polka/express server because depending on the adapter you choose there can be no polka/express server used - if you deploy to a serverless platform for example. Sockets for serverless are not so easy to implement and their implementation depend on the provider.
You are raising an important concern but right now I'm afraid this is not possible - someone corrects me if I'm wrong.
What you still can do is to write your front with SvelteKit, build it as a static/SPA/node application and then use your build from your own polka/express server. You lose the swift development experience offered by SvelteKit though, since your development will be parted in two: first the client, then the server.
EDIT
You can also use a data-pusher third service. They are straightforward to use but not necessarily free. Here is a list of data-pusher services from the Vercel page:
Ably
Pusher
PubNub
Firebase Realtime Database
TalkJS
SendBird
Supabase

React-Router Client-Side

Hi I'm new to React and having a bit of trouble with client-side routing.
I've seen in places that you can use react-router without a server instance like express or simple-server serving up the static files, but when I try to put something together I get this error:
[react-router] Location "/Users/<user>/Desktop/webapp-client/dist/index.html" did not match any routes
I would like to host the site as a static site e.g. Amazon S3 and cloudfront and connect to an NodeJS Express backend. I've seen that Angular 2 can route without having a server instance.
Could someone please shed some light?
You are completely right. If you will read this tutorial about react-router, you can realize that all files are static.
So problem is not in react-router, it is somewhere else (Amazon S3, NodeJS Express backend, etc.)

Ember app served from node.js using baseUrl/rootUrl with authentication

So, currently I have been using Ember cli to proxy to my api that is on a different port. I am trying to serve up a few routes using only node ('/', '/signIn', '/signUp'), and then once a user is authenticated through the '/signIn' route, serve up the ember app with a token.
As of now I am using 'baseURL' defined in my 'environment.js' of ember-cli, and my ember app is served to '/app/'.
I am getting confused on how one would go about serving up the ember app when a certain node route is accessed and the token is validated. In other words, I can visit my node routes fine, I can visit my ember routes fine using /app/, but am unsure of how to serve up the ember app once my server authenticates the user at '/signIn'. My reasoning for this, is that I do not want to serve up all the javascript assets to the client until I am sure they are an actual user. I am sure that this can be done using node and ember, but have not found much material online regarding such a configuration.
I have done a good amount of research, and the things that have caught my eye are 'baseURL' defined in CLI, 'rootURL' defined in Ember, and this from the Ember CLI page:
Integration
When using Ember inside another project, you may want to launch
Ember only when a specific route is accessed. If you’re preloading
the Ember javascript before you access the route,
you have to disable autoRun:
var app = new EmberApp({
autoRun: false
});
To manually run Ember: require("app-name/app")["default"].create({/* app settings */});
I know that people in production build the cli app into their '/dist' directory, and then server up the 'index' on their server, but I am not sure if this is the right path to go for development.
To recap, I have an ember-cli app that is getting proxied to my node server. I have a '/', '/signIn', and a '/signUp' route that is handled by node.js completely. I also have an ember app that is served at '/app/' and is making requests to my node app successfully.
What I am unsure of is how to server up the ember app once a user is verified at '/signUp' of my node server.
Any help at all is greatly appreciated. I am very new to this stuff, so please be gentle. I have researched this for two business days while consulting with senior engineers, and they have no clue about frameworks such as Ember.

Confusion about web-application ports

I have a project that is already deep in development, and there is a problem with the ports.
The Client is SPA written in backbone, that uses Sails as a server.
Problem is in the fact that Client is running in Express on port 80, while Sails is run on 1337.
I would like to host this backbone application within the Sails, not ouside the sails.
A bit more details:
When I fire the Fiddler, I am seeing requests being made to localhost:1337/get/user.
I need it to reside on port 80 as well.
Backbone is written using standard. I have app.js and main.js with all of the common folders (JS, LIBS, CSS). In other words, I have index.html that has data-main using require.js...
I have not problems running the client in separate node.js... how to run it within Sails.js?
Where do I put my index.html???
Trying to serve index.html as a static file won't work. Instead, try the following:
1. Serve your index.html from Sails
Just serve index.html as a combination of views/layout.ejs and views/home/index.ejs, which are mounted to the root / for default newly created Sails project.
2. Set up a catch-all route
In config/routes.js put something like this:
module.exports.routes = {
'/': {
view: 'home/index'
},
'/:unknownRoute': {
view: 'home/index'
}
}
This way you'll be able, for example, to use simple one-level pushstate routing within your SPA: routes like /products or /news will still give you your index.html (if you are using something more complex though, you may want to play a little bit more with your Sails routes).
3. Serve your API with a prefix
In your config/controllers.js put, for example:
module.exports.controllers = {
...
prefix: '/api',
...
}
This will let you serve your API with a prefix and have both /api/products (JSON API) and /products (your SPA) routes available.
4. Use any port you want
You can change the default port via config/local.js, even to 80 (if you don't have anything else running on 80, of course).
In production though, it would probably be a better idea to just proxy to default Sails' or any other port with Nginx, for example.

How to serve HTTP requests over meteor

I am creating a live streaming application using meteor. Currently I have a need to create a live transcoding option, so I am trying to integrate this node.js module with our meteor application: https://github.com/mifi/hls-vod. However, the way it works is that you actually call the app.get(hls/) from your HTML5 video tag's src. I am wondering if there is a way to expect the call to this get using meteor. Since I can't integrate express with meteor I am having some trouble doing this. I am wondering if there is a way to have meteor receive HTTP requests and send back data as per the node module.
This post has been updated
To server http requests over meteor you need a router. I would recommend ironRouter. There was meteor router but Tom Coleman also built ironRouter.
You can use something like this:
Router.map(function () {
this.route('serverFile', {
path: '/pathonserver',
action: function () {
console.log(this.params); //Contains params
this.response.writeHead(200, {'Content-Type': 'text/html'});
this.response.end('hello from server');
}
});
});
Hopefully that should get the route working similar to the express router.
Meteor Router is now deprecated for Iron Router.
See here for Server Side Routing with Iron Router
You directly use the underlying webapp as illustrated here
or flow-router
or picker for SSR routes.

Categories