I have a single app and want to build 2 packages each with its own theme served via the public folder.
App theme folder structure:
src/
themes/
meetings/
assets/
weddings/
assets/
How do I configure next so at build time I get a single theme in the public/ folder via a flag or some other mechanism?
Desired public/ folder output when running next build --flag weddings or whatever the proper syntax would be:
public/
theme/
weddings/
assets/
This way my components could reference /theme/${themeName}/assets/... to pull in specific images, icons, text, etc. with the same file name.
Everything that I have searched for showed info for dark/light mode theme toggling, which is not what I am looking for, I just want to build and ship an individually themed app from a single app to host on 2 different websites.
FYI - I already have a mechanism to determine and set the themeName to be consumed in the React components, just looking for the How To in next.js config.
I have a /public/static/images/ folder in my React project and I was hoping that I could hide the listing of what images are in there unless they go to the absolute path.
For example, right now if you go to http://website.com/static/images/ it returns the following:
<pre>
KBLogo.png
icons/
logo.png
logo.svg
test/
</pre>
Is there anyway to remove this? I created this application via create-react-app
I am using react for my application. I have a div that I would like to have a background image. But I can't get it to show.
When I include it in the src folder as myapp/src/bgimage.png it works perfectly but I've heard that I should include it in a folder named images at the root level so it's myapp/images/bgimage.png, however this does not work for me and gives me:
You attempted to import ../images/bgimage.png which falls outside of the project src/ directory.'
Can anyone tell me the proper way to include image assets in reactJS?
public: anything that is not used by your app when it compiles
src: anything that is used when the app is compiled
So for example if you use an image inside a component, it should be in the src folder but if you have an image outside the app (i.e. favicon) it should be in public.
I would add that creating an "assets" folder inside the "src" folder is a good practice.
Use /src if you are using create-react-app
If you are using create-react-app, You need to use /src for the following benefits.
Scripts and stylesheets get minified and bundled together to avoid extra network requests.
Missing files cause compilation errors instead of 404 errors for your users.
Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
Also, if you are using webpack's asset bundling anyway, then your files in /src will be rebuilt.
You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.
See this link
No,
public folder is for static file like index.html and ...
I think you should make an "assets" folder in src folder
and access them in this way.
In this article, I mentioned that
Keep an assets folder that contains top-level CSS, images, and font files.
In react best practices we keep an assets folder inside the src which may contain top-level CSS, images, and font files.
According to the create-react-app documentation, regarding the use of the public folder:
Normally we recommend importing stylesheets, images, and fonts from JavaScript. The public folder is useful as a workaround for a number of less common cases:
You need a file with a specific name in the build output, such as manifest.webmanifest.
You have thousands of images and need to dynamically reference their paths.
You want to include a small script like pace.js outside of the bundled code.
Some libraries may be incompatible with webpack and you have no other option but to include it as a tag.
In continuation with the other answers I would further like to add that you should create an 'assets' folder under 'src' folder and then create 'images' folder under 'assets' folder. You can store your images in the 'images' folder and then access them from there.
As per my understanding I will go with easier way. If you use your assets from public folder, after build contents from public will be maintained as same. So, if you deploy your app, the contents from public folder will also be loaded while your app loads. Assume your build is 5 MB (4 MB assets and 1 MB src) the 4 MB will get downloaded first then follows the src contains. Even if you use lazy and suspense your app will be slow during deployment.
I'm currently working on a small Angular2 project. In my case i have to reroute some of the requests (like "/faq", "/aboutus") back to my old backend server to get some server side rendered thymeleaf templates. Therefore i'm using the built in proxy to reroute to my backende server. Sadly for some weird reason it only servers the html files without any scripts and styles or images. (i used the angular-cli to create my project structure)
Thats why i wanted to add these static files into my angular2 folder but i can't find the correct place to make it available to my application.
Does anyone else know how to correctly place these file inside the project structure ?
Thanks in advance for any help
According to the current angular-cli readme (v1.0.1):
You use the assets array in angular-cli.json to list files or folders you want to copy as-is when building your project:
"assets": [
"assets",
"favicon.ico"
]
By default the assets folder is configured for this, so you can place your files into a structure like
├── src
. ├── assets
. . ├── file1.txt
. . ├── img
. │ └── image1.png
└── css
and serve them from url path /img/image1.png etc.
If you're not happy with the default option, add a folder name of your choice to angular-cli.json, i.e.
"assets": [
"static",
...
]
Create the ./src/static/ folder for your files and serve analogously to the default.
I've read a lot of articles and questions about site folder structure (develop & deploy) and still have missunderstood about questions below.
I marked my current folder structure:
Orange- looks like lib or vendor folder, where i'd like to store independent components;
Blue- folder contains my own, relative to current project (application) files;
Green- ready to deploy folder, that contains minified & concated files, which used to be included in index.html.
There are a few questions i'd like to find an answer:
Is it correct, that the best practise is deploying to web server only dist folder?
Should i concat my bower_components & app javascript files into single app.min.js file? Should i mess independent components with application files and ober ordering?
Should i deploy views folder with templates as is into dist/views folder?
Is it correct to mess all images (css images, app images, plugin images) into single dist/images folder?
Is it correct to store directive templates in views folder?
There is not relative to AngularJS client/app/js/common/helpers.js file,- i can't figure out where is the most obvious place for that (it could be prototypes, custom functions or objects)
I will be glad for any help, ty.
Here is my setup that I'm using for a few different enterprise Angular SPA's using bower and gulp.
My app folder is like yours, but I also keep my index.html template there. Gulp uses it and injects the CSS/JS files that I want (.min files when I do a release). I have it put an index.html in the root of the website (for debug).
I separate my bower and app scripts into lib.min.js / app.min.js. Instead of minifying the bower stuff myself, I just concat all of the .min files. I minify and concat my app scripts.
Instead of your dist folder, I stage everything for release in obj/client (VS automatically creates the obj folder for temp files). I don't include this in the solution (I don't want it in source control).
I don't have a views folder for release. Using gulp everything is stored in the Angular template cache (it's gets put in there with app.min.js). You'll see these also get a random string as a suffix (that's for cache busting).
In the end, my deployment consists only of index.html, app (dist in your case) and bin folders, and web.config. I exclude the gulpfile, bower.json, etc.
Here is my directory structure for an angular site I'm building called Simple Team that is bound together using Browserify.
This is my document root where my framework starts and serves public files. All my JS and HTML is bound together into app.min.js.
This is how I build my directives as modules with the views require()'d in.
"use strict"
require('moment')
require('angular-ui-router')
require('angular-ui-sortable')
require('angular-gravatar')
require('angular-elastic')
require('angular-local-storage')
require('angular-moment')
require('./routes.js')
require('./modules/focusMe')
require('./modules/selectize')
require('./modules/tagData')
require('./modules/www')
require('./modules/uiSrefActiveIf')
angular
.module('simple.team', [
'ngFileUpload',
'ui.router',
'ui.sortable',
'ui.gravatar',
'ui.bootstrap',
'selectize',
'angularMoment',
'angular-loading-bar',
'ng-showdown',
'LocalStorageModule',
'monospaced.elastic',
'textAngular',
'simple.team.uiSrefActiveIf',
'simple.team.routes',
'simple.team.focusMe',
'simple.team.ngBindHtmlUnsafe',
'simple.team.bytes',
'simple.team.strings',
'simple.team.auth',
'simple.team.tagData',
'simple.team.userData',
'simple.team.www'
])
.config(function($urlRouterProvider, cfpLoadingBarProvider) {
$urlRouterProvider.otherwise('/projects')
cfpLoadingBarProvider.includeSpinner = false
})
.controller('AppCtrl', function($state, $http, $rootScope) {
// Controller code
})
Routes and controllers
angular
.module('simple.team.routes', [])
.config(function($stateProvider) {
$stateProvider
.state('projects', {
url: '/projects',
template: require('./layouts/projects.html'),
controller: ProjectsCtrl,
controllerAs: 'ctrl'
})
.state('projects.card', {
url: '/card/?cardId',
template: require('./layouts/card.html'),
controller: require('./controllers/card.ctrl.js'),
controllerAs: 'ctrl'
})
Sorry I not get enough time to do some research and write all answers
May be I edit it later..
Questions 1:
Is it correct, that the best practise is deploying to web server only dist folder?
Answer, Yes
Here is an example directory structure in which source code (src) is separated from temporary precompiled assets (.tmp), which are separated from the final distribution folder (dist). The src folder contains higher level languages such as jade, typescript and scss; the .tmp contains compiled js, css and html files; while the dist folder contains only concatenated and minified files optimized to be served in production.
.
├── .tmp
│ ├── app.css
│ ├── app.js
│ ├── header.html
│ └── index.html
├── bower_components
│ └── angular
├── dist
│ ├── app.min.css
│ ├── app.min.js
│ └── index.html
└── src
├── app.scss
├── app.ts
├── components
├── header.jade
├── index.html
└── shared
Here is a link that you can find more information
Gulp Best Practices You Can Use Today to Radically Improve Your Development Experience
Should use folder per type: http://www.johnpapa.net/angular-app-structuring-guidelines/
Directive script and view should be in same folder.
Only deploy the dist folder.
Images can all be in dist/assets/images (or dist/components/images). In my projects, I have all directives, services, and images under dist/components (dist/components/services, dist/components/partials [for directives]). And in the root, I have a folder for each router/section (ie. dist/login, dist/home), which includes all relevant script, view, tests.
If a directive or service is used in multiple router/sections, I put it in dist/components/.... If it is only used in the one section, I put it right under the folder for that route instead.