spree backend: Error: no mixin named media-breakpoint-up - spree

Following this guide: https://dev-docs.spreecommerce.org/advanced/existing_app_tutorial#use-your-existing-authentication
with existing authentication. When wiring spree backend to an existing application, running bundle exec bin/rails g spree:backend:install
I'm getting this error:
I'm not sure (i.e. there is no reason) why my app would be accessing scss assets of a vendor gem, even in development! But here we are.

Related

How to connect existing Django app with existing react app using webpack

So I have a Django project that acts as a backend REST server, and I would like to integrate that with an existing React project that makes AJAX calls to this REST server. Again, both of these projects already exist, I just want to connect them. Let's say the root of my Django project is DJANGOROOT and that is where manage.py is located. My Django project has a couple of Django apps that are part of the project. Let's say my Django project is called "mydjangoproj", the two Django apps are called "myapp1" and "myapp2" and the React project is called "myreactproj". Each of these two projects (the Django project with the two apps, and the React project) is stored in a separate GIT repo and to connect them on my server I have the following directory structure:
DJANGOROOT/
DJANGOROOT/mydjangoproj
DJANGOROOT/mydjangoproj/settings.py
DJANGOROOT/mydjangoproj/urls.py
DJANGOROOT/mydjangoproj/static/
DJANGOROOT/mydjangoproj/templates/
DJANGOROOT/myapp1
DJANGOROOT/myapp2
DJANGOROOT/myreactproj
DJANGOROOT/myreactproj/package.json
DJANGOROOT/myreactproj/src
DJANGOROOT/myreactproj/src/index.js
etc
Note that the React app root folder is inside DJANGOROOT and is parallel to my django project and app folders.
The React app uses an npm module called react-scripts (see https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build) that has a build script that will build all the stuff in DJANGOROOT/myreactproj/src (staring with index.js) and will put all this in a folder called DJANGOROOT/myreactproj/build. When I run the build (using "npm run build") it fills up the folder DJANGOROOT/myreactproj/build like this:
DJANGOROOT/myreactproj/build
DJANGOROOT/myreactproj/build/index.html
DJANGOROOT/myreactproj/build/{several other files}
DJANGOROOT/myreactproj/build/static
DJANGOROOT/myreactproj/build/static/css
DJANGOROOT/myreactproj/build/static/js
DJANGOROOT/myreactproj/build/static/media
So it appears that to connect Django to my React app, I have to find a way to have the root path for Django (mydomain.com/) point to DJANGOROOT/myreactproj/build/index.html. I understand that I must create a "home" template that is launched by the Django view that runs at mydomain.com/, and that home template has to launch the React app something like this:
{% load render_bundle from webpack_loader %}
{% render_bundle 'main' 'js' 'DEFAULT' %}
But I'm not sure how exactly I need to tell Django where to look for main.js (or is it index.js) and I'm not sure how to get Django to see all the static stuff in DJANGOROOT/myreactproj/build/static.
I also ran "npm list webpack" inside DJANGOROOT/myreactproj to get the version of webpack, and it shows this:
└─┬ react-scripts#1.0.11
└── webpack#3.5.1
I assume this means that webpack 3.5.1 is being used and is somehow bundles with react-scripts v 1.0.11
Also note that the Django app is already running under HTTPS under NGINX and UWSGI, so this is a real server not a dev server.
Can someone who has been through this process shed some light on what I need to do to hook this all up properly?
If your react app is using django just to get data via REST, why you want to use react in django templates? I think preferred approach here is separation not integration. Create standalone react app with its own server (both can run on one physical server of course) - this way your react app and django app will communicate only by rest calls and nothing else needed. If you have some assets in django app - move them to frontend react app.

Vue and Django Development Environment

I just started a new little project for learning purposes and I want to try out Vue js with Django (with DRF). I'm trying to use vue loader (webpack-simple template).
The problem is that I don't know how to synchronize npm run dev and python manage.py runserver. I don't know how to access a template that is rendered by django in webpack-dev-server.
I mean I have a template with django-template specific keywords like {% load static %} that is not handled by webpack-dev-server, obviously.
I know I can build it everytime npm run build, but that's kinda annoying and boring to wait for it everytime I want to make a little change.
In webpack, it's specified to run on a default index.html file, how can I make it work on the template that is actually rendered on 127.0.0.1:8000 with python manage.py runserver running? I know it doesn't make any sense to run 2 dev servers, but I don't know how to explain in other way.
Is there an alternative?
Thanks in advance for answers!
Run your Django server as normal. webpack shouldn't serve your files. It should just build them (use webpack development settings and webpack --watch) and let webpack put them in the static directory of your Django project, e.g.
// in your webpack config
output: {
path: path.resolve(__dirname, 'project/static/js')
}
That way Django can serve the files that are run through your webpack pipeline.
On top you can use the webpack live reload plugin and the live reload browser extension to auto-reload when your assets change.
When you are ready to commit your changes, build your files in production mode and commit the build files in the static dir.

Google App Engine - This app has no instances deployed

App Instances:
App Versions:
app.yaml:
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /my_uri
script: path.to.my.script.script.app
I created a Python Flask app with Google App Engine. I initially ran into some issues, so I re-deployed the app. This created a new version. After doing so, I deleted the previously existing version which had one instance deployed. The currently deployed version has no instances deployed, as you can see in the image at the link above.
When I submit a request to my-app-ID.appspot.com/my_uri, I get a 404 error:
Error: Not Found
The requested URL /my_uri was not found on this server.
I believe this is related to my app not having an instance deployed. Is that correct? If so, how would I remedy this?
If not, what could be causing the 404 issue?
Thanks everyone!
As your error message indicates gcloud app browse makes a request for the / url to your app.
From Request handlers:
When App Engine receives a web request for your application, it calls
the handler script that corresponds to the URL, as described in the
application's [app.yaml][2] configuration file . The Python 2.7
runtime supports the WSGI standard and the CGI standard for
backwards compatibility. WSGI is preferred, and some features of
Python 2.7 do not work without it. The configuration of your
application's script handlers determines whether a request is
handled using WSGI or CGI.
But your app.yaml file does not contain a handler with a matching url pattern (as / doesn't match /my_uri), so GAE doesn't know which app script to launch for that request, so it'll return 404.
So the first thing you have to do is to add in app.yaml a handler with a url pattern that matches a / request.
You may want to go through the Getting Started with Flask on App Engine Standard Environment guide. In there the recommended handler would be:
handlers:
- url: /.*
script: main.app
The above alone won't necessarily make your app work, there's plenty of other things that can go wrong. You should get familiar with the app's log viewer as that's essential for debugging your app. See Understanding request log fields
But before you even go to deployment on GAE, learn how to run and test your app locally. See Using the Local Development Server

Heroku + Apartment PG::Error: ERROR: function pg_stat_statements_reset() does not exist

I use Apartment gem in Rails 4 to support multi-tenancy in Postgres 9.3.3 on Heroku.
An error is occurred when Apartment gem creates a new tenant.
Deep investigation showed that a schema was created, but no tables inside.
Heroku logs showed an error:
PG::Error: ERROR: function pg_stat_statements_reset() does not exist
When a new schema is created Postgres is trying to reset stats by executing the function pg_stat_statements_reset()
By default, this function can only be executed by superusers (from original doc).
Heroku doesn't give you superuser privileges.
So you need to disable extension pg_stat_statements.
Solution 1 - Quick hot fix directly in DB
Access the Rails Console for your Heroku app:
heroku run rails c
Execute SQL statement in schema public:
ActiveRecord::Base.connection.execute("DROP EXTENSION pg_stat_statements;")
Solution 2 - via migration
Check the file db/schema.rb. Most probably it contains a line
enable_extension "pg_stat_statements"
Create a migration file
rails g migration DropExtensionPgStatStatements
define self.up method
def self.up
disable_extension "pg_stat_statements"
end
apply the migration
rake db:migrate
Now the file db/schema.rb should not contain that line
Commit changes (schema and migration files) and deploy to Heroku
rake deploy:production:migrations
Regarding the rake task see deploy.rake

Ember guides todomvc tutorial

I am following the tutorial in the Ember guides simply copy/pasting code. When I reach this part of the tutorial I get errors on reloading the page including:
Failed to load resource file:///home/kwal0203/ember_development/ember_tutorial/js/libs/jquery.min.js
Failed to load resource file:///home/kwal0203/ember_development/ember_tutorial/js/libs/handlebars.js
Assertion failed: Ember Views require jQuery 1.7, 1.8, 1.9, 1.10, or 2.0 ember.js:394
Assertion failed: Ember Handlebars requires Handlebars version 1.0.0. Include a SCRIPT tag in the HTML HEAD linking to the Handlebars file before you link to Ember. ember.js:394
Uncaught TypeError: Cannot read property 'COMPILER_REVISION' of undefined ember.js:23618
Uncaught TypeError: Cannot call method 'map' of undefined
Any help appreciated
It's almost clear why your app is not working, you are loading it using the file:// protocol. This makes your vital js files to not load at all resulting in the errors you get.
Failed to load resource file:///home/kwal0203/ember_development/ember_tutorial/js/libs/jquery.min.js
...
The simple solution to your problem is to serve all the app related files from the http:// protocol, this can be easy achieved using a simple webserver. If setting up a webserver is out of your scope then use a online editor like http://jsbin.com instead and load the js libraries from a CDN, then copy and paste all your code in the online editor and everything should work correctly.
If you have python installed on your system, another possibility to have your files served by a webserver could be the following:
$ cd /home/kwal0203/ember_development/ember_tutorial/
$ python -m SimpleHTTPServer
Now open your browser and visit: http://localhost:8000
Hope it helps.