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.
Related
Last week, I've started building a desktop application with electron and I want to integrate React with it.
Electron official documentation does not provide a detailed Framework Integration section.
So, I've tried to do some googling and I've found a useful article about converting Create React App to electron application.
However, I just get confused about the project structure and how to make sure that I have everything to take my app into production ( React + Electron ) without tears in the future.
Where should I put my renderers?
How these renders can handle React Pages or React Components?
Please, would you guide me to set up React-Electron for a production-ready application?
My current structure
The main.js is the main file ( process ) for Electron.
It doesn't really matter too much about your structure provided you have one and it makes sense.
I'm the developer of secure-electron-template, which is a react/electron template so I'll share with you the format of this project and you can use this as a template if you'd like.
app/
electron/
main.js <-- BrowserWindow gets created here, event handlers, etc.
menu.js <-- Custom menu is defined here
preload.js <-- Preload code is here
src/
components/ <-- Reusable .jsx components
core/ <-- The root wrapper element of the app (contains a store, page router)
pages/ <-- Each page of the app (.jsx and .css).
home/
home.jsx
home.css
about/
about.jsx
about.css
redux/ <-- Page routing code, may not be specific to you
index.html <-- Root html page
index.jsx <-- Root element that renders the root wrapper element
dist/ <-- Gets auto-created
node_modules/
resources/
icon.icns
icon.ico
icon.png
etc...
test/ <-- Contains test scripts
.gitignore
.babelrc
package.json
README.md
webpack.config.js
I'm new to Gatsby and I started a project using a starter, Gatsby-starter-ghost. The starter comes with the Casper theme, and now I want to replace Casper with a new theme or build a custom theme.
I can't figure out how to replace Casper or even find where it is in the project folders. There is a lot of documentation available on Gatsby themes and starters but I can barely find any documentation for gatsby-starter-ghost. I've dug through the node_modules and src folders and can't even find where the Casper theme is located. If I install a new theme with npm and put the plugin in the gatsby-config file it breaks my project and I get GraphQL errors galore. I've read that themes should usually be in the content folder, but my content folder contains nothing but two empty folders.
Here is my project structure:
How do I replace the theme in the gatsby-ghost-starter?
Gatsby Themes use a concept called 'shadowing'. You can replace any of the default files for the theme by placing a file with the same path and name in your content folder. This is probably why your folder doesn't have any theme files, the starter is just using all the defaults.
That said, looking at gatsby-starter-ghost, it doesn't look like it's using a Gatsby Theme at all, so shadowing doesn't apply.
If you look at gatsby-starter-ghost/src/components/common/, it has various files which define the components that are being used. Most notably, Layout.js is setting out the base structure for every page, and imports a CSS file from ../../styles/app.css.
This CSS, those common components, as well as the various template files in src/templates are what is defining the HTML structure of the pages, and the CSS that those use. If you adjust those, you should be able to change the design to suit your needs.
Start by looking at app.css and adjusting it a bit, see how far that takes you. But you may need to update the components if you want to introduce new classes or change the HTML structure.
I am working on a site (React via create-react-app, Sass for all components) whose CSS and data are driven by the URL. The URL is made up like so:
www.mysite.com/:brand-:locale
Each of the 4 brands has its own colors/fonts/bg images/etc. Each locale has its own data file as the site is translated in several languages. Each locale may also have unique styles.
Examples:
www.mysite.com/brand1-en (brand1 styles, English content)
www.mysite.com/brand1-fr-ca (brand1 styles, French Canada content)
www.mysite.com/brand2-pt-br (brand 2 styles, Portuguese Brazil content)
www.mysite.com/brand3-en (brand 3 styles, English content)
Right now my project is built on the following paradigm:
All brand-locale combinations share base (un-branded) CSS (defined in /src per component) as the structure of all the sites is the same
Each brand has a Sass file in /public with brand-specific styles
Each locale has a Sass file that imports the appropriate brand Sass file, and can also have its own unique styles
I am using node-sass to compile Sass after a build runs, and outputs each locale's CSS into its respective folder
The app reads the URL and programmatically adds a reference to the appropriate locale CSS file to the end of at runtime
Each locale has its own data file in a respective folder in /public which gets fetched when the app loads (no issues here, just FYI)
I would like to find a better way of styling the sites based on URL, but I do not know-how. I get FOUC between the app loading (showing un-branded styles) and the addition of the CSS tag to . It seems that there should be a way to have brand variations in components, but I don't see how this would not force the CSS for all brands to load in the browser at once.
Does anyone have any thoughts?
I have a question regarding webpack and serving images.
I have a webpack config that build a React webapp and also serves .jpg files from a specific folder.
But what happens if from my webapp I download and add a new image to this folder?
Can I refresh webpack so that it will serve the new image and I will be able to import it with require.context?
Or, is it something that webpack is not supposed to do, and so I need to have this handled in the backend?
Thanks,
This isn't something that would typically be handled by Webpack. require.context creates references to all modules (or in this case images) in a directory that can be required with a request matching a regular expression, so if you were to use that, you'd need to recompile your app every time you add or remove an image from the folder.
It would be best to handle this in the backend, so you can just use the URLs to the images directly.
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.