I am phasing ember into a project that has its content linking from the server root (as it is in prod).
E.g I have a html files with links like this:
<img src="/content/foo.svg">
How can I set up ember cli so that when I run ember server these URL's will work, without having to move the ember-cli project to the directory in my file system containing /content. I could get round this by moving content into the ember folder but don't want to do this at present..
my folder structure:
/content
/anotherFolder
/theEmberCliApp
/app
/etc etc..
but when I run it I get this error:
[Report Only] Refused to connect to 'ws://127.0.0.1:35729/livereload' because it violates the following Content Security Policy directive: "connect-src 'self' ws://localhost:35729 ws://0.0.0.0:35729".
livereload.js?ext=Chrome&extver=2.0.9:193__connector.Connector.Connector.connect livereload.js?ext=Chrome&extver=2.0.9:193Connector livereload.js?ext=Chrome&extver=2.0.9:176LiveReload livereload.js?ext=Chrome&extver=2.0.9:862(anonymous function) livereload.js?ext=Chrome&extver=2.0.9:1074(anonymous function)
I think the issue is this: baseURL: '../../' how can I get round this? For other non ember sites I just point apaches httpdconfig to the location of the parent of content, but I don't want to stick the whole ember cli project in there.
my environment.js:
/* jshint node: true */
module.exports = function(environment) {
var ENV = {
modulePrefix: 'ember-app',
environment: environment,
baseURL: '../../',
locationType: 'auto',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
}
},
APP: {
// Here you can pass flags/options to your application instance
// when it is created
}
};
if (environment === 'production') {
}
return ENV;
};
Related
I have been trying to get my portfolio working on Github Pages with a custom domain, I have build everything with Sapper / Svelte. Locally everything works great, but when I deploy the site, I get my 404 error page when first loading the domain, if I then use the links to navigate the site it works perfect. What surprises me is that even the index works perfectly but ff I then reload the page, I get the 404 again.
I followed this Sapper and github tutorial.
But I am using a CNAME in the static folder (it is deployed at the root) to get the domain name to work, I also changed the following places to include the domain.
In server.js I have the following line for the base url:
const dev = NODE_ENV === 'development';
const url = dev ? '/' : '/';
polka() // You can also use Express
.use(
url,
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()
)
In package.json I have the following:
"scripts": {
"dev": "sapper dev",
"build": "sapper build --legacy",
"export": "sapper export --basepath <custom-domain> --legacy",
"start": "node __sapper__/build",
"deploy": "npm run export && node ./scripts/gh-pages.js"
},
I have tried different combinations for the basepath and url. For example with and without https, I also tried the github repo name. And also tried it with and without CNAME file.
I probably don't understand the basepath well enough, but the documentation was not extensive enough for a beginner like me.
Does anybody know what I'm doing wrong?
After looking into the issue with colleagues, turns out that the problem was slightly different.
For custom domain, no base path adjustments need to be made. So no url in server.js and no --basepath in package.json.
The reason it did not update was because my gh-pages.js still used the wrong sapper export command.
scripts/gh-pages-js needs to look like:
ghpages.publish(
'__sapper__/export/',
{
branch: 'master',
repo: 'https://github.com/<user>/<repo>.git',
user: {
name: '<user-name>',
email: '<email-adress>'
}
},
() => {
console.log('Deploy Complete!')
}
)
I am looking for some best practices for publishing and developing nuxt plugins. I would like to write a plugin which gives our web applications the possibility to request oauth tokens from everywhere. I have written this plugin localy in my project and it works. Now my target is to move the code to a seperate plugin project and upload it to npm so every one in my company might use it easily. Are there any guides how to setup a nuxt plugin project? I found several guides for creating vue-plugins but the structure of them are a bit different to nuxt. I do not have a install method. Because my plugin simply wraps vuex store methods defined in oAuthStore.js as global methods, which can be used when I register my plugin in nuxt.config.js.
Vue plugins seems to work a bit different.
I upload a vue-plugin with an install method. When I try to import it and run my application on dev server (npm run dev) i always get the error message:
This dependency was not found: * my-plugin in ./plugins/vuex-persisted.js friendly-errors 16:55:24
friendly-errors 16:55:24
To install it, you can run: npm install --save my-plugin
My plugin has been uploaded to npm correctly and I have used it by executing npm install --save my-plugin so it has an entry on dependency list in package.json.
When I try to npm-link my-plugin I get the same error. This is the only way I know for rapid prototyping because I do not want a npm publish every time I want to test something. Does everyone know a way for a better developing workflow for working on nuxt plugins?
Thanks for any help.
Best regards
Moritz
/** oAuthPlugin.js **/
import oAuthStore from './oAuthStore.js'
import Cookies from 'js-cookie'
import createPersistedState from 'vuex-persistedstate'
export default ({store, isHMR, app}, inject) => {
app.store.registerModule('oAuth', oAuthStore );
var me = app;
inject('getOAuthCredentials', () => {
var data = {};
if(app.$store) {
var data = app.$store.getters["oAuth/getAuthCredentials"];
}
return data;
});
inject('requestOAuthCredentials', (data) => {
if(me.store) {
me.store.commit("oAuth/requestOAuthCredentials", data);
}
});
if (isHMR) return
// add persisted state as a vue mounted mixin
if (!app.mixins) {
app.mixins = []
}
app.mixins.push({mounted () {
createPersistedState({
key: 'vuex-persisted',
paths: ['oAuth'],
storage: {
getItem: key => Cookies.get(key),
setItem: (key, value) => Cookies.set(key, value, {expires: 3}),
removeItem: key => Cookies.remove(key)
}
})(store);
}});
}
/** nuxt.config.js **/
/*
** Plugins to load before mounting the App
*/
plugins: [
{ src: '~/plugins/vuex-persisted', ssr: false },
{ src: '~/plugins/oAuthPlugin.js' }
],
I'm trying to configure the adapter in my Ember CLI app to use a different host based on the environment. In dev, I want it to be the default current host (letting me customize it via the --proxy option, but in production I know it will be http://some.url.
I tried importing my ENV into my application adapter:
// adapters/application.js
import DS from "ember-data";
import ENV from "../../config/environment";
export default DS.ActiveModelAdapter.extend({
host: ENV.host
});
but I'm getting an error that tmp/tree_merger../config/environment.js doesn't exist.
You are pretty close. You should only going up one step in the directory tree (when you are in a route, controller, etc you need to go up two).
// adapters/application.js
import DS from "ember-data";
import ENV from "../config/environment";
export default DS.ActiveModelAdapter.extend({
host: ENV.host
});
The documentation is here.
Note you probably shouldn't be defining your own variables directly on ENV. Use ENV.APP in config/environment.js
var ENV = {
...
APP: {
// Here you can pass flags/options to your application instance
// when it is created
host: 'some_host'
}
};
And access it the same way
import ENV from '../config/environment';
export default DS.ActiveModelAdapter.extend({
host: ENV.APP.host
});
This seems to work
// adapters/application.js
import DS from "ember-data";
export default DS.ActiveModelAdapter.extend({
host: window.MyAppENV.host
});
though I'm not sure if it's the best method.
I have read the cookbook regarding deploying my symfony2 app to production environment. I find that it works great in dev mode, but the prod mode first wouldn't allow signing in (said bad credentials though I signed in with those very credentials in dev mode), and later after an extra run of clearing and warming up the prod cache, I just get http500 from my prod route.
I had a look in the config files and wonder if this has anything to do with it:
config_dev.php:
imports:
- { resource: config.yml }
framework:
router: { resource: "%kernel.root_dir%/config/routing_dev.yml" }
profiler: { only_exceptions: false }
web_profiler:
toolbar: true
intercept_redirects: false
monolog:
handlers:
main:
type: stream
path: %kernel.logs_dir%/%kernel.environment%.log
level: debug
firephp:
type: firephp
level: info
assetic:
use_controller: true
config_prod:
imports:
- { resource: config.yml }
#doctrine:
# orm:
# metadata_cache_driver: apc
# result_cache_driver: apc
# query_cache_driver: apc
monolog:
handlers:
main:
type: fingers_crossed
action_level: error
handler: nested
nested:
type: stream
path: %kernel.logs_dir%/%kernel.environment%.log
level: debug
I also noticed that there is a routing_dev.php but no routing_prod, the prod encironment works great however on my localhost so... ?
In your production environment when you run the app/console cache:warmup command you need to make sure you run it like this: app/console cache:warmup --env=prod --no-debug Also, remember that the command will warmup the cache as the current user, so all files will be owned by the current user and not the web server user (eg: www-data). That is probably why you get a 500 server error. After you warmup the cache run this: chown -R www-data.www-data app/cache/prod (be sure to replace www-data with your web server user.
Make sure your parameters.ini file has any proper configs in place since its common for this file to not be checked in to whatever code repository you might be using. Or (and I've even done this) its possible to simply forget to put parameters from dev into the prod parmeters.ini file.
You'll also need to look in your app/logs/prod.log to see what happens when you attempt to login.
I have Symfony application which uses FOSRestBundle, and have some
settings configured in main config.yml:
fos_rest:
service:
serializer: my.serializer
view_handler: my.viewHandler
view:
view_response_listener: false
failed_validation: 200
Now I am building new public API bundle, and I have following problem.
When I test my API from browser, I get
Unable to find template "".
500 Internal Server Error - InvalidArgumentException
It works from
curl. I guess it fails because browser asks for html content type, and
I don't need any template, I just want to return xml/json like this:
return $this->get('fos_rest.view_handler')->handle(View::create(array('x' => 'y')));
I use to fix this with updated config:
fos_rest:
service:
serializer: my.serializer
view_handler: my.viewHandler
view:
view_response_listener: false
failed_validation: 200
format_listener:
default_priorities: [xml, json]
fallback_format: xml
but then I broke some actions in exising application (other bundles
which use FOSRestBundle).
Is there a way to tweak FOSRestBundle (or any other bundle) config
only for my public APi bundle?
I tried with Extension:
$loader = new YmlFileLoader($container, new FileLocator(__DIR__.'/../
Resources/config'));
$loader->load('services.yml');
where services.yml is:
fos_rest:
service:
view_handler: my.public.api.view_handler
format_listener:
default_priorities: [xml, json]
fallback_format: xml
but I got:
InvalidArgumentException: There is no extension able to load the
configuration for "fos_rest".
When you are installing the packages by composer you need to add the bundles to app/AppKernel.php manually:
public function registerBundles()
{
$bundles = array(
// ...
new FOS\RestBundle\FOSRestBundle(),
new JMS\SerializerBundle\JMSSerializerBundle(),
// ...
);
}
Here is more info.
when we work with symfony4 + rest api after installing rest api package check bundle files if fosrest bunfle is does not exits then add
FOS\RestBundle\FOSRestBundle::class => ['all' => true]