I'm integrating an ember-cli app inside my main site which will be accessible at url http://host/faq/....ember...routes
So I added baseUrl: /faq/ to my ember
config/environment.js
module.exports = function(environment) {
var ENV = {
modulePrefix: 'faq',
environment: environment,
baseURL: '/faq/',
locationType: 'hash',
The problem: While developing in my ember-cli environment with ember server my assets such as (SVG, FONTS and IMAGES) are giving me a NOT FOUND now.
For example: http://host/assets/images/bg.png gives me a not found it now expects http://host/faq/assets/images/bg.png. Why is this happening?
If you want to serve assets from the root, leave base url as: baseURL: '/'.
Then, to customize the urls for your ember app, configure rootURL on the Router instance (app/router.js): rootURL: '/faq/'
http://emberjs.com/guides/routing/#toc_specifying-a-root-url
I had the same problem with this project: Ember-Material-Navigation
I fixed this issue by defining a baseUrl variable in my main sass file and concatenating to all external urls.
$baseUrl: "/faq/";
#include font-face("Font Name", font-files($baseUrl + "/dir/font.ttf"));
However, this only works if you are using sass.
Related
I have an issue on which I struggled all day long, I have a VueJS app with vue router that I host on amplify?
everything working great Except that
I need to give a direct access to a file (I want to register an Apple merchant ID with stripe)
I tried to create a route in my route/index.js with my file name that redirect to a component that open the merchantid file with an windows.open('myfile').
it works great on local serve and build but not once deployed through amplify built with webpack
//router/index.js
import WellKnown from '#/components/AppleVerification.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/.well-known/apple-app-site-association',
component: WellKnown,
}
]
const router = new VueRouter({
mode: 'history',
routes
})
export default router
// AppleVerification.vue
<template>
<div></div>
</template>
<script>
export default {
name: 'WellKnown',
props: {
file: String
},
mounted () {
window.open('file:///.well-known/apple-developer-merchantid-domain-association')
}
}
</script>
so I went to amplify console and make a redirection with first priority to the URL and target address to the file. but it didn't work also.
I went out of ideas on how to give access to a file in my sources with a direct URL.
would appreciate a little help
thanks
You issue comes from the acces to the file througth Amplify for several reasons.
Try following:
rename your endfile "apple-developer-merchantid-domain-association"
with an extension like
apple-developer-merchantid-domain-association.txt
remove the dot in your path public/.well-known/apple-developer-merchantid-domain-association to public/well-known/apple-developer-merchantid-domain-association.txt
in your amplify console create a priority 1 rule that redirects your
https://mydomain/.well-known/apple-developer-merchantid-domain-association to
/well-known/apple-developer-merchantid-domain-association.txt with a 202 rexrite method.
It should work
You even didn't need the component anymore
I am using react and django. I am trying to use code-splitting in my components, so in my webpack.config.js I have this
output: {
path: path.join(__dirname, "frontend/static/frontend"),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js",
publicPath: "/frontend/static/frontend/"
},
but when it requests it in the browser it goes to
/en/account/quiz/drug-abuse/frontend/static/frontend/2.chunk.js
instead of
static/frontend/2.chunk.js
my javascript files are located in my static folder for django but react routing starts at /en/, I am guessing that is why the confusion is happening.
Is there anyway to make the webpack file look for
http://domainblahblah.com/static/frontend/2,chunk.js
I'm trying to set up hot module replacement for my bundled frontend static assets that are served through Django's template system, if that's even possible. I'm currently refreshing the page via livereload whenever the compiled assets are changed, but the compile times are getting longer and any CSS changes end up triggering a full page reload.
Here is an example of the template file in Django.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Header Links -->
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
window.CONFIG = {
/** Injected application configuration from Django. */
};
</script>
<!-- Webpack bundle url -->
<script src="{{ bundle_url }}"></script>
</body>
</html>
I've been able to serve the assets through webpack dev server and inject the bundle url http://localhost:3000/bundle.js through template variables, so I can see the application in the view.
Webpack Configuration
'use strict';
const webpack = require('webpack');
const CONFIG = require('./config');
/**
* Webpack configuration for a development environment.
* #type {Object}
*/
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
require.resolve('core-js/shim'),
CONFIG.PATHS.ENTRY,
],
output: {
path: CONFIG.PATHS.BUILD,
filename: CONFIG.OUTPUT_FILENAME,
},
module: {
rules: CONFIG.SHARED_RULES.concat([{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}, {
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}]),
},
resolve: CONFIG.WEBPACK_RESOLVE,
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
};
Start Script:
'use strict';
// Crashes the script on unhandled rejections instead of silently ignoring.
process.on('unhandledRejection', (error) => { throw error; });
process.env.NODE_ENV = 'development';
// Vendor
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const chalk = require('chalk');
// Local
const WEBPACK_CONFIG = require('../config/webpack.config.dev');
const CONFIG = require('../config/config');
const PORT = parseInt(process.env.PORT, 10) || CONFIG.DEFAULT_PORT;
const HOST = process.env.HOST || CONFIG.DEFAULT_HOST;
const URL = `http://${HOST}:${PORT}/`;
const compiler = webpack(WEBPACK_CONFIG);
const server = new WebpackDevServer(compiler, {
compress: true,
hot: true,
host: HOST,
stats: 'minimal',
});
server.listen(PORT, HOST, (error) => {
if (error) { return console.log(chalk.red(error)); }
console.log(chalk.cyan(`Starting the development server at ${URL}...`));
['SIGINT', 'SIGTERM'].forEach((signal) => {
process.on(signal, () => {
server.close();
process.exit();
});
});
});
I'm uncertain how the dev server triggers a hot reload. I was under the impression that the bundle includes a script that connects to a Websocket connection on the dev server and that the connection would trigger the script to download and display the new assets. This may not be the case though, and I haven't been able to find any info pertaining to how hot reloads are communicated. I've only found a general overview of how hot reloads work once the client receives the update.
After a lot of searching, I finally found a solution to my problem. I found information about how to integrate webpack-dev-server with an existing server in the old webpack docs, so I got rid of the entire build script and replaced it with a script in package.json that only used webpack-dev-server without any flags at all:
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server",
// Scripts...
}
This automatically injected the hot module replacement code into my bundle and refreshes my page on a change. This is much faster than my previous livereload server. The bundle is referenced via the url http:localhost:8080/bundle.js in my application template and not by a local path. Local paths wouldn't work anyways since the bundles are saved in memory.
The url also explains how to get the --inline --hot functionality working too, but I was never able to get it to work on my setup.
If you need to use local path's instead of referencing the bundles via url, than you would have to rely on using webpack's watch mode and manually refreshing the page or rely on a Django plugin. The solution I found worked well for me because it mirrors our production environment. Our Django deployment references the frontend assets through a CDN that we manage. It may not work well for you if you have to deploy the frontend assets with your Django code, but it's possible if you create a Django setting that toggles between two different application templates: one for development that uses the URL to pull in the script and one for production that references the files from the STATICFILES_DIRS.
The problem I don't think is Webpack's fault. I've noticed these speed problems occur when I had Django serve my React files. When you use Django, your files are served by the Django server, and that inherently is pretty slow compared to the webpack-dev server. The whole communication process between webpack dev server to Django can be time taking, which has to have the Django server to trigger a change and then re-serve the static files again.
One solution to this would be to isolate React front end code from the backend code and have your React consume your Django's REST API. It runs extremely smooth and reduces a lot of load on the server.
Messing around with deploying, and I'm going to need to put the app outside the root url of the server. Based on this answer all I need to do is change the environment.js file to look like this.
module.exports = function(environment) {
var ENV = {
modulePrefix: 'ember-drupal',
environment: environment,
rootURL: '/',
locationType: 'auto'
};
if (environment === 'production') {
ENV.rootUrl = '/myApp/';
ENV.locationType = 'hash';
}
return ENV;
};
So when I run
ember build --environment=production
I expect it to set the rootUrl to be /myApp/, yet when I load up localhost/myApp/ it gives me 404 saying that it's still looking for /assets/ instead of /myApp/assets.
Two interesting notes.
If I change the default rootUrl to /myApp/, it works.
The source code has a meta tag called "ember-drupal/config/environment". The content of the meta tag is json of my environment variables.
The 'ember build' command spits out this:
{
"modulePrefix":"ember-drupal",
"environment":"development",
"rootURL":"/",
"locationType":"auto",
"exportApplicationGlobal":true
}
And the 'ember build --environment=production' spits out this:
{
"modulePrefix":"ember-drupal",
"environment":"production",
"rootURL":"/",
"locationType":"hash",
"rootUrl":"/myApp/",
"exportApplicationGlobal":false
}
So it's setting the locationType correctly, but setting the rootUrl twice.
A freaking capitalization error..... rootUrl vs rootURL. It took me all the way of typing this out to find it.
I am using ember-cli and everything is working using the default built in server. I need to deploy to tomcat under an application context.
In config/environment.js, I have set
baseURL: '/myapp/ember/',
I can navigate to http://localhost:8085/myap/ember/index.html and can see all the ember log messages but I get the following.
Error: Assertion Failed: Error: Assertion Failed: The URL
'/index.html' did not match any routes in your application
If I go to http://localhost:8085/myap/ember/ I get a 404
If I go to http://localhost:8085/myap/ember/index.html#/ I get a 404
In ember inspector I can see the index route url is set to /myapp/ember/ but if I go to this url without specifying index.html I get a 404.
I seems that it thinks that index.html is a route for some reason. How do I fix this?
Turns out I had to set the locationType to 'hash' in config/environment.js
module.exports = function(environment) {
var ENV = {
environment: environment,
baseURL: '/',
locationType: 'hash', //auto
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
}
},
...