My question is partly technical and partly about deployment strategies and workflow. I built a project using Require JS. It includes a number of distinct js modules, and is built upon Kirby CMS. The directory structure of the project is something like this:
project
assets
styles
style.css
js
scripts
script1.js
script2.js
script3.js
vendor
app.js
images
fonts
content
...
kirby folders
....
The file app.js is called in the footer of my site's page like so:
<script data-main="/assets/js/app" src="/assets/js/vendor/require.js"></script>
It configures RequireJS by calling the requirejs.config() function and then calls the main script file that loads everything else using RequireJS's requirejs() function.
I've used RequireJS' s optimization tool to compile the project in such a way that the optimized files are all dumpted into a directory called dist (a name I just picked up from this tutorial). So in the end dist contains a replication of every directory and file under assets, only optimized, and the file app.js is a concatenated and optimized version of all the js modules that I have in the project. So far so good.
What I am unsure about, however, is how I'm the supposed to make use of this new secondary version of all the code. What for instance if I want to deploy a version of the site to the production server without all the source js files? Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist. I deploy using git and beanstalk. One way to do this would be to manage different branches for staging, production, and development, in which the production and perhaps staging branches have references to the files under dist, but this seems awkward.
So my question is given this kind of optimization set up, which if you look at the tutorial linked above is one way to do this, how then do you manage the switch to the optmized version of everything seemlessly, without having to go back into your code and change everything up? Is there some key part of the process that I'm missing here?
Each time I deploy the site, I would need to go through my code and in every place that I referred to files under the assets directory, I would need to replace that with dist.
I've looked at the tutorial you've linked to and do not see how it is true for the tutorial. The tutorial does not use absolute paths, so should be deployable from dist just as well as from the directory that contains the pre-optimization sources. If you cannot do this for your application, that's because you've done something different from the tutorial. Your script tag, for instance, shows absolute paths.
So the solution is to design your application to avoid absolute paths. This way, you won't have to change paths when you deploy from dist. I'm using this very method to deploy optimized and non-optimized versions of one of my apps.
Related
I ran this command to create a ReactJS app
npx create-react-app learningapp
This created several folders now, I dont know which of them are important. I mean I dont know their purpose.
Can anyone explain their purpose in short?
node_modules -- very important, as this will contain all the npm packages and their entire list of dependencies installed.
public -- very important, contains the static files served by your web server.
Index.html -- the index.html file where your react app will inject elements into. I believe this is the only "essential" file.
The other files in this folder will contain logos and manifests if you'd like your webpage to be able to be installed as a mobile app seamlessly. The manifest.json file holds the information about what the app icon and such will look like.
Favicon is the tiny logo you see in your tab title
robots.txt will have the instructions for bots visiting your website. Read about it here if you'd like (https://www.cloudflare.com/learning/bots/what-is-robots.txt/)
src -- very important, will contain your source code. If you want your app to do anything at all, it wouldn't be very wise to delete this folder. If you want to rename this to something else, you can, but you'd have to mess with the webpack configurations. So, not worth the little extra effort. However, you may alter the folder contents.
Unless you want performance monitoring and are writing tests for your app, you can safely delete the test file and the report webvitals stuff. You can make your test files somewhere else too, it doesn't matter if it's here. Just make sure you configure your testing library so that it looks for the correct files.
The rest of the files in this folder can be modified all you like, but try not to touch index.js unless you want to go mess with the webpack configs to change the entry point. Webpack looks for index.js as an entry point to build its dependency tree during compilation.
.gitignore -- this is the files/folders you can tell git to ignore when tracking your folder. A usual candidate for this file is the node_modules folder.
package.json/package.json -- very important, don't directly mess with these unless you know what you're doing. This contains the info about npm packages which your require to run your project properly. A situation where you will need to mess with package.json is when you want to add some custom npm scripts, which is often quite useful.
README.md -- just your readme file which is used to display info about the project on your github repo for example. You can delete it, but just put something on there containing basic info about the repo/ what it does.
THIS link suggests that /app directory contains all configuration, templates (.html.twig files) and translations, and the /src directory contains PHP code.
However, HERE we can see that .css and .js files are loaded from /src/AppBundle/Resources/public directory and not /app/Resources/public directory. What is the best practice? How should I professionaly approach this problem, and where should I keep all the templates, .js and .css files?
I like to put css and javascript that serve for general purposes in /app/Resources/public and the ones specific to the concerned bundle in /src/YourBundleNameBundle/Resources/public. Like that when I want to see a code specific for a bundle I will just go to that bundle , when it's a general purpose code I would be sure that it's in the root. I have seen expert people doing it and it makes sense for me.
It's a matter of choice and there is no right and wrong answer.
the best practice is to put your css and js files in your bundle particularly in folder that you called "public" (yourBundle/Ressources/public/css/yourStyle.css)
and make sure to run this command before
php bin/console assets:install
and To avoid typing this command each time, I recommend you make a link (a kind of shortcut), by adding the active parameter:
assets:install --symlink
So, the web /bundles/folderBundle actually points to src/yourBundle/Resources/public
On Windows, you must run the command prompt in administrator mode
I have a project that uses source files external to the project. Effectively, there is the actual project source code (an Typescript/Angular 2 application, lets call it the 'core' stuff), and this is a generic web application that is meant to be the base code that consumes these external source files.
The external files include additional stuff-- that could be SCSS files, images, evn additional JS. The way I want this to work is that webpack copies these external files from any source directory (this is critical, it is not part of the core project) to a local .tmp directory. The files in the .tmp directory are worked on along with the core src files to generate the prod output.
I can't figure out how to add these additional external source files to the watch list. Effectively what I'm looking to do is watch that directory and as things change, it re-copies the affected files to the local .tmp directory and triggers a recompile.
Presently I have to restart webpack and have a very very ugly solution using Grunt to watch the additional files. It's nasty but these kinds of workarounds have historically been what I've had to do with webpack.
Does anyone have a better solution? Ideally I'd like to not have to mix grunt with webpack. Webpack should be able to do this, but its hard to know whether there's an existing plugin for this or what the best approach would be.
Also, please spare the "look for it on google" or "read the docs" comments. I've combed through it all, hard, and have not found anything.
Thanks in advance.
As of now Webpack doesn't watch external files out-of-the-box . You need a plugin for that.
Basically idea is to have a file watcher module chokidar / watch , listening to the file change , and when there is a change, restart the webpack compilation phase . Webpack plugins can access the compilation object and we you need to hook it to a compiler phase i.e. 'emit' , 'after-emit' etc.
This Webpack plugin exactly solves your problem - https://www.npmjs.com/package/filewatcher-webpack-plugin .
I am playing with the yoman trying to build a web site using the webapp generator.
If Managed to create a web site that works under grunt server, when I change a js file grunt notices the change change and does a live load and everything works as you would expect.
When I try a plan grunt, it attempts to run the dist task, it manages to include my html files, but skips any of the javascript or script files I created in the script and styles diretores. I assume its the case I have to tell grunt to includes these files
Files such as main.js seem to make it through, but there are no references to main.js in the Gruntfile, so I not sure which part of Gruntfile.js to change.
Doing a yo doctor reports
[Yeoman Doctor] Everything looks all right!
Q. How to do I tell grunt to include and user created files.
Q. I noticed that all my image files where renamed, fair enough how do I refer to a file that I known is going to be renamed in a javascript file
Q. Does anybody known a good web resource for yoman where these quesion might have already been answered?
Be careful on this glob pattern scripts/{,*}/*.js. This takes only the js files that are inside scripts or immediate child folders.
Make sure to change it to scripts/**/*.js to include all js files in all subfolders.
Also get an idea on tags build: css, build: js in your index.html, wiredep plugin used by Yeoman in gruntfile to understand what files will be injected into dist folder.
I reviewed this question already - Including external libraries using the Rails 3.1 asset pipeline - which is basically what I'm looking for with one caveat: I'd like to include the external url in the asset pipeline so that when I deploy to production, the external url gets bundled into a file with the other local files that were required.
More details:
My use case here is that I have found a plugin on GitHub that I like, and being a good member of the open source community, I'd like to help contribute back. The most time efficient technique that I'm considering is to fork the repo, then point my local project that needs that file to the raw source of the required JS file during development, but have that file get bundled with the rest of my application when I deploy to staging / production. This would allow me to keep the plugin tied closely to the parent project, but keep things on my own track so that I can decide when to merge in updates from the base project as well as submit any fixes I have back to the parent with easy pull requests.
With that said, I have not been able to find any documentation about how to do this with the current rails JS asset pipeline or if it is possible at all. Some quick tests locally point to the idea that this works in a css file but not for js files. Can anyone confirm if this is possible? Thanks!
I would use something like this custom rake task. Basically what you do is write that rake task into the beginning of your deploy script, but modified to put the file in your vendor/assets folder (or where ever you want that is pulled into the asset pipeline.)
That way you pull the requested file on deploy, but it's there in your code when your asset pipeline bundles everything up.
Here is the code in-case the link rots:
namespace :remote_file do
desc "Get a file from a remote server"
task :fetch do
# based on http://snippets.dzone.com/posts/show/2469
# http://farm1.static.flickr.com/92/218926700_ecedc5fef7_o.jpg
Net::HTTP.start("farm1.static.flickr.com") do |http|
resp = http.get("/92/218926700_ecedc5fef7_o.jpg")
open("fun.jpg", "w") { |file| file.write(resp.body) }
end
end