How to connect views to default api urls in Sails.js - javascript

I have created a new api using sails sails generate api tasks, using the default configuration of sails 0.12.
With Sails awesome blueprints, I can access localhost:1337/tasks and see the list of tasks or localhost:1337/tasks/create?text=yo to create a new one.
But what I want it to connect these endpoints to an .ejs view.
I tried creating a new folder tasks and placing show.ejs or index.ejs files in it but it's still returning the Json.
Is there a default way to render .ejs files through the default blueprint urls, without creating new routes and controller methods?

Well it took me a while to find the answer, so for anyone looking to use sails.js development speed, here is the way to do it:
After generating the api, create a folder inside your views folder (named after your controller). The files in it should be:
+ tasks (the folder with the same name as your controller)
- find.ejs (list of all items)
- findOne.ejs (view a specific item)
- create.ejs (after a successful creation)
- update.ejs (after a successful update)
- destroy.ejs (after a successful deletion)
These files are connected by default to the different api endpoints. So, when you access the url localhost:1337/tasks sails will automatically render tasks/find.ejs. Same for the other endpoints.
Another point is that each view will have a global variable named data that will include the result of the api request (i.e. the records that were fetched / modified).
You can see a small example here: https://github.com/web-development-course/Bootstrap (look at the 'things' api)
I hope it will help you guys

Related

how to use variables in base url and compose config when making the request in Vue.js?

What I want to achieve - for vue to serve a foo1.bar.com where "foo" is a name of the tenant in multitenant project. So base API that vue uses becomes foo2.bar.com/api when foo2.bar.com is accessed and foo3.bar.com/api when foo3.bar.com is accessed.
Context: this is a suggested way to achieve coherence with existing multitenant backend API, URLs of which look like t1.site.com/api and t2.site.com/api .
It was suggested on reddit as a response to this question:
I have almost finished my first decoupled (frond and back ends are
separate) project - the back end is written with django + rest
framework and implements multitenancy (means my api endpoints look
like tenant1.sitename.com/api/endpoint and
tenant2.sitename.com/api/endpoint) . While I was developing, I assumed
that there shouldn't be a problem consuming my api since the front end
is the same for all tenants, so django could just consume same vue
front end no matter which tenant.. ant then it struck me - actually
it's vue consuming django api, not other way around.. and vue doesn't
know which tenant is selected..So now I'm very close to a deadline and
lost.
My main.ts looks like this
axios.defaults.baseURL = 'http://tenant1.mysite.local:8000/api/';axios.defaults.withCredentials
= true;
and works... while I need the first tenant's data....
I'm not entirely sure that variable is supposed to be used in baseUrl, or that typescript is supposed to be used, but as I said, my current setup has baseurl in main.ts .
To reiterate:
I have one back-end serving api for different tenants like t1.foo.com/api and t2.foo.com/api and one front-end that currently only sends requests to only one baseurl defined in settings, for example t1.foo.com/api ; It then serves it on t1.foo.com/home . Problem is, if I would to go to t2.foo.com/home , it would still send requests to t1.foo.com/api .
I know neither how to make different (t1,t2,t3) urls accessible nor how to make it send requests to matching api. I want to acieve my frontent sending the api request to t1.foo.com/api when i go to to t1.foo.com/home and t2.foo.com/api when I go to t2.foo.com/home .
I asked a similar question before and I got this full detailed answer
if I understand you correctly I think the best solution for is to set this in vue.config.js file:
publicPath: './'
which sets the url of all request to the backend to the relative url of the served html file (including static files like css, js...).
For example if you access you application with this url t1.mysite.com/index.html - all request will be sent to t1.mysite.com/..../....
you can read more about publicPath in vue.js docs

How do I work with the 'all' collections to use with the File System Route API in Gatsby.js?

I'm looking to work with Gatsby.js' File System Route API to generate pages from collections in a private GraphQL API. It seems like the File System Route API always uses an 'all' collection request to generate these (allFile, allSite, allPost, etc).
Because my data is coming from a separate API, there is no equivalent 'all' collection in Gatsby's schema, and my data is also namespaced inside a field by the gatsby-source-graphql plugin.
Is it possible to define my own 'all' collection for Gatsby to use? I would like to alias allFacilities to my-remote-api { facilities }, but I'm not sure if that's possible.
If not, is there another way?
File System Route API is the new brand was developed by Gatsby (^2.26.0) to create pages dynamically, removing the GraphQL query of the gatsby-node.js and using a syntax notation in the /pages folder ({},[],(), etc).
Following your use-case, you will need to infer and modify the schema by prefixing the "all" keyword (maybe using createNodeFactory and createNodeHelpers from gatsby-node-helpers package, without knowing exactly your data schema and structure it's difficult to guess a sample code), but the idea is:
const nodeHelpers = createNodeHelpers({
typePrefix: 'Shopify',
createNodeId,
createContentDigest,
})
}
By default, this will prefix the "all" keyword, creating a allShopify node, queryable and usable by the File System Route API.
On the other hand, there's the "old" way: using GraphQL in your gatsby-node.js, using the createPage API to create pages dynamically, passing data (typically a unique identifier) using the context, and, in the template, using another query filtering by that unique value to get your data (i.e: in the gatsby-node.js file you query for all posts and create pages dynamically (using the createPage API) for each post, using the slug value. Then, you pass an identifier (the slug, or the title) using the context and, in your template (not /pages as File System Route API) creating a filtered query by this unique value to get your post data).
If you are not able to customize your node with the helpers, maybe the second approach fits your requirements. Here you have a guide provided by Gatsby docs about that part.

How can I create a route that take an user to his/her dashboard?

I am working on a platform for different clients, every client is tracking different KPI, therefore a common project cannot be shared due to the models are different.
What I want to do is the following:
The user creates an account
Once, they have created the account, they can log in and see their
dashboard
What I am doing is to create a different file per client for every part of the project (Models, API, server, ctr). For instance; we have 2 clients client A and client A, the project will have a folder called models (which contains the mongoose schema) therefore, I was thinking to create 2 folders inside that folder called model, client_model_A and client_model_B. And, I pretend to do the same for the APIs, the DB connection, and the server.
Just like this:
Do you have any suggestion? Or should I use another method?
No need to copy in files just create a data table name user_configure Than set all configuration in user_configure

Code organization (node, js involving models, service, route and mocha tests)

I'm quite a beginner in the project architecturing / structuring side of things.
The overall project currently looks like:
route/home.js
service/appService.js
models/appModel.js
In the route file, I require appService.js.
appService.js takes care of some API calls to external services, such as getting an access_token from such API service.
When I receive the access token, a callback is made in appService which calls appModel (appService requires appModel.js), and in turn appModel stores the access token in the database. Then, another callback is called in appService which in turn does runs the callback that the route page provided, then I make a redirection.
I am using mocha for testing the service and model files.
My service file is requiring the model file, so when I create a mocha test for the service file, the model is called indirectly as well.
Should I require the model in my route file instead of the service file, and run the model function in the route, once I receive the access token response from the API in the service file? What do you suggest?
Normally you would have some kind of bootstrapper or service container which handles loading your files.
That way you avoid tight couplings between the different parts of your application and can exchange them out when testing (such as swapping the DB for fixtures).

Making collections available on the client without meteor startup

When i define my meteor collections on the server and try to access them in the client without being in any of the meteor provided methods rendered, events, created, helpers ... I always get an error that says Meteor collection not defined if i try to redefine the method in the client, i get the Meteor collection already exists. I am able to get around this by referencing my custom made collections in a Meteor.startup() function. How can i reference the collection i defined on the server in the client. In the meteor docs there able to create two instances of Meteor.Collection() and subscribe even before declaring.
// okay to subscribe (and possibly receive data) before declaring
// the client collection that will hold it. assume "allplayers"
// publishes data from **server's "players" collection.**
Meteor.subscribe("allplayers");
...
// client queues incoming players records until ...
...
Players = new Meteor.Collection("players");
You can place Players = new Meteor.Collection("players"); at the top of your file without it being in Meteor.startup. Make sure its defined before you initiate Meteor.subscribe
e.g your file could be:
Players = new Meteor.Collection("players");
MyCollection2 = new Meteor.Collection("MyCollection2");
Meteor.subscribe("allplayers");
Meteor.subscribe("mycollection2");
..rest of stuff
Something a bit cleaner might be to create a file in your project's root directory containing this so that its used on both the client and the server without you having to redefine them for each e.g a collection.js in your project root could contain
Players = new Meteor.Collection("players");
MyCollection2 = new Meteor.Collection("MyCollection2");
if(Meteor.isClient) {
Meteor.subscribe("allplayers");
Meteor.subscribe("mycollection2");
}
so now you don't have to define Players or MyCollection2 on your /server or /client anymore. The way meteor loads files will ensure that this is defined before your other regular files. This probably works best if you've arranged your files in the /client,/server and /public format as used on the other meteor examples (parties & todo)
Edit: as BenjaminRH suggests, putting your file in /lib/collections.js assures it will be loaded even before other files in your root project dir.

Categories

Resources