There is a lot of documentation of how to structure and create Ember.js apps with Rails as a backend. Pupular solutions are to use gems as ember-rails and ember-source or the all in one ember-appkit-rails.
However i'm trying to create a simple Sinatra app that handle a JSON only backend with Ember.js as the frontend.
The few resources that i found seems a little outdated, so i'm looking for simple way to do that.
So my question is:
How i integrate Ember.js with a simple Sinatra backend ??
Examples of how to do so will be appreciated.
There is a very simple repo on Github, that could serve as a starting point for you. Just grab the code, start the sinatra app server, and point your Ember datasource to it, like this:
App.MyRestAdapter = DS.RestAdapter.extend({
host: 'http://localhost:3000',
namespace: 'api'
});
App.store = DS.Store.create({
adapter: 'MyApp.MyRestAdapter'
});
You could also look into the source of Travis CI, as they use Sinatra (travis-api) and Ember.js (travis-web).
Related
I'm trying to do a basic GraphQL query to a Shopify store with Sinatra. Could someone help me figure out what I'm doing wrong? I looked at their API to do this:
require 'shopify_api'
require 'sinatra'
class App < Sinatra::Base
get '/' do
shop = 'xxxx.myshopify.com'
token = 'shpat_xxxxxxxxxxxxxxxxxxxxxx'
session = ShopifyAPI::Session.new(domain: shop, token: token, api_version: "2021-04")
ShopifyAPI::Base.activate_session(session)
ShopifyAPI::GraphQL.initialize_clients
client = ShopifyAPI::GraphQL.client
SHOP_NAME_QUERY = client.parse <<-'GRAPHQL'
{
shop {
name
}
}
GRAPHQL
result = client.query(SHOP_NAME_QUERY)
result.data.shop.name
end
end
Which gives this error but I don't want to use Rake or Rails. Is it possible to do a GraphQL query to Shopify with Ruby?
ShopifyAPI::GraphQL::InvalidClient at /
Client for API version 2021-04 does not exist because no schema file exists at `shopify_graphql_schemas/2021-04.json`. To dump the schema file, use the `rake shopify_api:graphql:dump` task
As the error states, you need to first dump the schema (see this link: https://github.com/Shopify/shopify_api/blob/v9/docs/graphql.md#dump-the-schema).
Then you create a shopify_graphql_schemas directory in the same root as your ruby script, and put the generated JSON there.
Like stated in the comments, this requires a Rake task, so you need to be using Rails.
If your project doesn't use Rails, you need to do a quick workaround.
You create a temporary barebones Rails project, then generate the dump using that project (you can delete the project when you're done with this).
It's a bit hacky, but it's the only thing I can see that would work.
New link to schema dump
https://github.com/Shopify/shopify_api/blob/v9/docs/graphql.md#dump-the-schema
You need to use something like this
rake shopify_api:graphql:dump SHOP_DOMAIN="SHOP_NAME.myshopify.com" ACCESS_TOKEN="SHOP_TOKEN" API_VERSION=2022-04
Old one doesn't work anymore
I am starting a new project, Nuxt.js for the frontend and Laravel for the backend.
How can I connect the two?
I have installed a new Nuxt project using create-nuxt-app, and a new laravel project.
As far as I have searched, I figured I need some kind of environment variables.
In my nuxt project, I have added the dotenv package and placed a new .env file in the root of the nuxt project.
And added CORS to my laravel project, as I have been getting an error.
The variables inside are indeed accessible from the project, and im using them
like this:
APP_NAME=TestProjectName
API_URL=http://127.0.0.1:8000
And accessing it like this:
process.env.APP_NAME etc'
To make HTTP calls, I am using the official Axios module of nuxt.js, and to test it i used it in one of the components that came by default.
The backend:
Route::get('/', function () {
return "Hello from Laravel API";
});
and from inside the component:
console.log(process.env.API_URL)//Gives 127.0.0.1:8000
//But this gives undefined
this.$axios.$get(process.env.API_URL).then((response) => {
console.log(response);
});
}
What am I doing wrong here?
I have tried to describe my setup and problem as best as I can. If I overlooked something, please tell me and I will update my question. Thanks.
Taking for granted that visiting https://127.0.0.1:8000/ in your browser you get the expected response, lets see what might be wrong in the front end:
First you should make sure that axios module is initialized correctly. Your nuxt.config.js file should include the following
//inclusion of module
modules: [
'#nuxtjs/axios',
<other modules>,
],
//configuration of module
axios: {
baseURL: process.env.API_URL,
},
Keep in mind that depending on the component's lifecycle, your axios request may be occurring in the client side (after server side rendering), where the address 127.0.0.1 might be invalid. I would suggest that you avoid using 127.0.0.1 or localhost when defining api_uris, and prefer using your local network ip for local testing.
After configuring the axios module as above, you can make requests in your components using just relative api uris:
this.$axios.$get('/').then(response => {
console.log(response)
}).catch(err => {
console.error(err)
})
While testing if this works it is very helpful to open your browser's dev tools > network tab and check the state of the request. If you still don't get the response, the odds are that you'll have more info either from the catch section, or the request status from the dev tools.
Keep us updated!
Nuxt has a routing file stucture to make it easy to set up server side rendering but also to help with maintainability too. This can cause Laravel and Nuxt to fight over the routing, you will need to configure this to get it working correctly.
I'd suggest you use Laravel-Nuxt as a lot of these small problems are solved for you.
https://github.com/cretueusebiu/laravel-nuxt
Throughout the documentation for the new App Bridge, Shopify refers to the shopOrigin value and how it's used to configure the Provider from app-bridge-react but they never specify how to get this value?
The react app is loaded inside of an iframe and the src includes the shopOrigin value as a query string param called shop, but when I try the following code I get the error window is not defined:
const params = queryString.parse(window.location.search);
const config = {
apiKey: process.env.SHOPIFY_API_KEY,
shopOrigin: params.shop,
};
1) Why would I be getting window is not defined in javascript code running in a browser?! This makes no sense to me
2) If this value can be read from of the provided libraries such as #shopufy/app-bridge-react please tell me how
Unless you're using a library tailored specifically to Shopify, you have to manually save the shop origin during OAuth authorization.
Hopefully this Shopify tutorial is of some assistance
The shopOrigin is available within your browser cookies.
If you followed the Shopify development for react and Node.js, you should already saved this after the Shopify authentification.
I am not sure what exactly is the need for shopOrigin, if you just wanted to go to admin section of the shop from client side you can use Redirect in app bridge. otherwise you can store the shop detail on server during auth process and create a get api to retrive the details on client side as needed.
I' building a small website. The back-end is written in Kotlin and uses Spring boot, and the front-end is built in Elm.
The generated javascript app will be served statically by my back-end on deployment.
For development, I currently work as such :
Serve my spring boot application on localhost:8080
Serve my Elm app on b using create-elm-app
The main reason is that create-elm-app allows for hot-compilation and hot-reload of the Elm app, which makes it very convenient.
The problem with this is that I have to set up all my elm http calls against another port locally, which means I have to alter the code for production.
Ideally, I'd like to:
Either have live-recompilation of elm code that changes ( I used chokidar in node, but didn't find a direct java alternative) coupled to a spring boot hot reload
Have create-elm-app redirect my API calls
Or auto-proxy all my calls to another location via a third party
Does anyone have experience with this? What setup would you recommend?
Cheers,
Alright, using the word proxy did help!
It seems that the create-elm-app documentation already expects this use case. You can read more about it here.
Basically what needs to be done is:
Create a elmapp.config.js file at the root of the elm project, with the following content (in my case, you can adapt):
module.exports = {
proxy: "http://localhost:8080",
}
Then, in your elm code, use absolute URLs. For example :
makeCreateGameUrl : Model -> String
makeCreateGameUrl model =
absolute
[ "game" ]
[ string "players" (joinListOfStrings model.newPlayerNames) ]
After this, your API calls will be directly redirected to your backend.
I am almost done with upgrading my Rails3 app to Rails5; But I am facing a problem with assets pipelining and precompiling. We're using cdn as asset host.Now, What happens is that when I set config.assets.precompile to false in staging environment, the app doesn't load images from js.jsx files. At other places, the app is fetching the static assets (js,css,images) from the asset_host link that I've provided. But in some specific javascript files, The images is being pointed out to my app's domain like app.my_domain.com/assets/my_image.png,And it is giving 404 not found error.
In javascript, the code is something like
return (
<img src="/assets/my_image.png"></img>
)
Since this is a js file, I cannot use asset_path helper method here.
How to resolve this issue ?
PS: setting config.assets.precompile to true loads the image from app.my_domain.com/assets/my_image.png, but that's not what I want because of this. config.assets.compile=true in Rails production, why not?
Any help with this is highly appreciated. Thanks in advance.
I found an answer after some research. I changed the name of the file to js.jsx.erb and accordingly used asset_path helper method which rails provide.
return (
<img src = "asset_path 'my_image.png'"/>
)
It works.