We have developed an application using Extjs 4.2 following MVC pattern. We have project folder setup as follwing:
WebContent
--> app
-->controller
-->model
-->store
-->view
app.html
app.js
In app.js we have defined all models, controllers, stores under Ext.application. Like:
Ext.application({
name: 'MyProject',
autoCreateViewport: true,
models: [
'Model1',
'Model2'
],
stores: [
'store1',
'store2'
]
(views and controllers similarly)
This all works good for us. Now we need to concatenate all these models, stores, controllers, views into one app-all.js and use it in our app.html. I have read many posts on net on how to do that with Sencha cmd tool, but none of them was application to me as we have a restriction to install cmd tool and we need to generate concatenated and minified file on build time with Maven.
I found out a solution that by using JSBuilder2, I can get a concatenated + minified app.js.
Problem is now when I use this minified file, all individual js files are still being downloaded. As if I delete individual js files, I get 404 error and application fails to load.
I suppose that is because of way we have defined models, views, controllers in our app.js; they are still looking for js class files in respective folders.
Please share if you have any solution to this.
You can disable the dynamic loader using the enabled property of Ext.Loader (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.Loader-cfg-enabled):
Ext.Loader.setConfig({ enabled: false })
You must place this code after including the framework files, but before your application files.
This should prevent Ext JS from trying to download files. You need to make sure all framework and application classes that you use are included on the page.
Related
I have a few components and I want to deploy them into S3 and make them reachable with CloudFront.
My problem is that I don't know what file(s) I need to upload to S3 and which file needs CloudFront needs to point to as entry point.
Here's my stencil.config.tsx:
import { Config } from '#stencil/core';
export const config: Config = {
namespace: 'stencil-test',
taskQueue: 'async',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
dir: './build/dist'
},
{
type: 'www',
serviceWorker: null // disable service workers
}
]
};
I tried executing npm run build that generated a couple of folders: build/loader and build/dist there's a lot of stuff within each folder but I have no idea how which folder and files are supposed to do what.
It was hoping the build command would generate a minified file that contained all the stuff needed (is this how it works?) so I could eventually do something like the following where I want to use my components:
<script type="module" src='https://cdn.jsdelivr.net/npm/my-name#0.0.1/dist/myname.js'></script>
Can anyone offer some guidance or point me towards any resources?
The www output target is meant for generating apps and not really relevant for component libraries. To host your components, you should upload the whole generated dist folder. Only the files that the client needs are downloaded, which depends on the client and which components they access (lazy-loading). So you don't need to worry about the amount of files. See https://stenciljs.com/docs/distribution.
To start, Stencil was designed to lazy-load itself only when the component was actually used on a page. There are many benefits to this approach, such as simply adding a script tag to any page and the entire library is available for use, yet only the components actually used are downloaded.
If you want to generate a single bundle containing all your components, there's an output target called dist-custom-elements-bundle. For the differences to dist you can have a look at the same docs link above.
One of the main differences is that loading the script doesn't automatically register the components for you, you'll have to either do it manually per component (using customElements.define(), or define them all using the defineCustomElements() export. The official documentation for that output target is https://stenciljs.com/docs/custom-elements.
I'm fairly new to web development and I was wondering if there was a way to route a static web page with its own stylesheets and javascripts, using vue-router.
Let's say I have a directory called staticWebPage that contains:
an index.html file
a javascripts directory containing .js files
and a stylesheets directory containing .css files
Now, I'd like to map /mystaticwebpage to this index.html file so it displays that particular static web page.
I'd like to do something like this:
import VueRouter from 'vue-router'
import AComponent from './components/AComponent.vue'
import MyHtmlFile from './references/index.html'
router.map({
'/acomponent': {
component: AComponent
},
'mystaticwebpage': {
component: MyHtmlFile
}
})
Of course, this doesn't work as I can only reference Vue components in router.map.
Is there a way to route to that ./staticWebPage/index.html file using all the .js and .css file contained in the /staticWebPage directory?
So for your case you can do something that uses Webpack’s code-splitting feature.
More precisely, what you want is probably async components. So the code (and the css) used in the component definition (including any script you included there) will be loaded only when the corresponding page is accessed.
In large applications, we may need to divide the app into smaller
chunks and only load a component from the server when it’s actually
needed. To make that easier, Vue allows you to define your component
as a factory function that asynchronously resolves your component
definition. Vue will only trigger the factory function when the
component actually needs to be rendered and will cache the result for
future re-renders.
It can be a bit challenging to setup, so please refer to the dedicated guide in the VueJS doc.
If a directory has been made available to a node application in the server.js file which sits in the main directory using:
app.use("/scripts",express.static(__dirname + "/scripts"));
and I attempt to use require from a file inside of that directory (/scripts/custom.js) using:
var Testing123 = require('../app/models/article');
Is there a reason this is not possible? and is there a solution to that problem?
Edit: In one of my views (views/tree.ejs) I use:
<script type="text/javascript" src="../scripts/custom.js"></script>
to access my Custom script which sits inside my scripts folder which is made available using express.static, Custom uses a web scraper to scrape articles and present them in circles (in the form of an image, title and link) on views/tree.ejs, I now want custom.js to save each article it creates to a mongodb database but to do so, it needs access to things like my Article Schema hence the problem above.
You cannot because Node.js scripts and browser scripts do not run in the same context. Your app.use call just exposes a /scripts route that serves assets statically on your HTTP Server.
Your scripts/custom.js script seems to be a browser-side script (Because you load it with a script tag inside an ejs view) but you want to use require inside it and this will not work as this is a Node.js function.
Have a look at LearnYouNode which is an excellent Node beginner tutorial so that you will understand how modules work in Node and know a bit more about the separation between server-side and client-side JS.
Hi I created a sails app completely for api using. It doesn't has a view file, now I have a html, css, js directory structure, which I want to show as a front page of my app. My html directory structure is following.
+-ApiDocumentationApp
|
-script
|
-css
|
-images
|
--index.html
Now I don't want to use any templating engine like jade or ejs. Also I don't want to change the directory structure to sailsjs', asset and view system. Is there any way I can do it inside sailsjs?
Whatever your reluctance may be, by far the easiest solution here is to place all of your assets (scripts, css, images and index.html) under the /assets folder of your Sails app, and remove the default / route in /config/routes.js. Then your index.html file will be served up by Sails by default.
The alternative would be to modify the default Gruntfile.js (in Sails v0.9.x) or the individual Grunt tasks under /tasks/config (in Sails v0.10.x) to point directly to your top-level asset folders and files rather than ./assets. It's do-able, but error prone and less sustainable!
I need to send emails from MeteorJS application and I want to generate them using html templates, not by "html-in-js" stuff.
What I've tried to do:
1) Use Template.emailTemplate(data), but Template is not defined server-side.
2) Save my email templates as *.html files under <app>/server/email/templates directory, get their contents using fs.readSync() and then compile/render it using meteor's built-in handlebars package.
This works fine in development environment, but fails in production using bundled app because of *.html files under server directory are not bundled. Besides, the structure of directories is changed during bundle process and relative paths to templates become invalid.
3) Your proposals? =)
Currently, templates are not supported server-side. That functionality is coming. In the mean time, I created a package you might find useful called handlebars-server that allows you to use Handlebars on the server. You can use the package with atmosphere or by copying the project directory into your packages folder. Here is an example:
Example:
my-email.handlebars
Hello, {{name}}
server.js
Email.send({
html: Handlebars.templates['my-email']({ name: 'Chris' })
});
Note
No templates in the handlebars file. Just put your html and Handlebars expressions. The file will get compiled into a function and assigned to a property on the Handlebars.templates object. The property name will be the name of the file minus the handlebars extension.
Github
https://github.com/eventedmind/meteor-handlebars-server
Another option now is to use the server side 'private' directory to read resources out of and use them to store resources your application will use.
create the meteor project, and then create a /private directory.
Place your templates in there (You should use the meteor-handlebars-server package instead if you need handlebars)
Read in your template with:
Assets.getText(assetPath, [asyncCallback]);
Obviously you can also do pattern matching regex/replace against the string once it's loaded.
example:
var template = Assets.getText(assetPath); // Synchronous
var username = 'John Doe';
template = template.replace('{{username}}', username);
Email.send({
html: template
});
For more info on the assets functionality: Meteor Assets
Meteor 0.8.*, here is another solution.
https://gist.github.com/fpoirier1/534bf5db69ece2c83205