I use pip to install wagtail on my computer. Its operating system is windows 10. In my project, I need to customise the admin UI, mainly to modify the css file in client folder. The folder client is peer to folder wagtai on github. But I can not find the client folder on my computer.
How to find the client folder?
Wish for your help.
The client folder is not part of the installed Wagtail package - instead, the package contains compiled and minified versions of the CSS and JavaScript assets as part of the Django apps that make up Wagtail, for example under wagtail/admin/static/wagtailadmin/css/. This is because Wagtail's stylesheets are written in Sass and need to be compiled using a Node / NPM-based toolchain to be usable in the browser, and end users of Wagtail aren't expected to have this toolchain installed.
As a result, making arbitrary customisations to Wagtail's CSS isn't formally supported - to do it, you'll need to start from a checkout from Github, and set up a dev environment as per the documentation. As of Wagtail 2.12 it is possible to customise the colour scheme using CSS variables, though.
Related
I want to ask on how can I host my react app. It is a 3d product configurator.
I tried to host it on AWS Amplify but the 3d models doesnt load
If you want to host an application on aws amplify you have to create a build version of your app (assuming that it works already without any start issues meaning that you have a functional react app created with the command npx create-react-app).
Usually your react app runs on local host and it's basically like a test/development version of your app. When you take it into aws it really wants a build version of your app. The build command will generate everything you need for this. Navigate to your react application folder and
Run the command
npm run build
This will create a folder that you can send to aws amplify.
When you go to the aws amplify site it'll ask you if you would like to build a website or host a website.
Select host and then it'll ask if you would like to push it from a repository like github. For now lets just skip it and keep the deployment as simple as possible. Deploy without git for now.
Next, we want to click on drag and drop so that you can manually select the file build folder that your npm run build command generated.
Look for the build folder that was generated and drag that folder into the aws area. You don't actually have to click the 'choose files button'. Sometimes the box glitches and won't let you drag anything outside of the box. So what you can do is just open up your directories and manually find that build file in your folders. Drag it from there to the aws zone at the bottom of the screen.
Give your AWS app a name and env name.
From there you can deploy. Once you deploy it'll give you a site address. Also before you make your build, be sure that all of the packages you need are installed. I had an issue where my axiom commands were not working because I had not installed it prior to pushing my build.
So if your project depends on a certain npm package to run your .gltf files make sure that it is installed on your application. You should see it inside the node modules folder (in your apps local directory not the aws one).
I think AWS uses the node modules folder to generate everything your project needs (But I am not 100% sure of this). But it didn't work prior to me installing the package and pushing the build folder again to aws via drag and drop.
There are better ways to do this but this is what worked for me! Hope this helps to at least get your site up and running. Also hope it helps with any package issues that might have been happening with your 3d models. This is about as far as I can take you. Good luck!
Primarily, I'm trying to integrate a react application (Created and build separately) with Drupal.
Problem
Unable to install private package from Bitbucket using npm install git#bitbucket.org:user/shared-package.git in Drupal app, because no package.json found.
Implementation Details
Development Environment
To achieve this in development environment I run npm run build which produces the following content in dist directory.
Not going in the details of what are the roles of other files but to make the things work, I just need to copy bundle.js file and paste it inside a directory under app/web/themes/custom/abc_themes/js/.
This is okay for development environment to copy a folder from one project and paste it into another. However, for production environment it' not viable.
Production Environment
In production we thought to create a private package on Bitbucket, where through Bitbucket pipelines on every commit we trigger a build and push that build 's result into a separate repo (i.e. private package).
Here is the content that is pushed to the so-called private package. Since it's the entire react application (not a library) therefore when it builds it creates compiled js and doesn't contain packgae.json.
Now if I try to install this package throught npm install
code ENOLOCAL
npm ERR! Could not install from "bitbucket.org:user/shared-package.git" as it does not contain a package.json file.
That is obvious but to solve this I can't convert my project into a library. Because even if I convert it to a library, Drupal needs a build js file at the specified directory to work.
Expectation
Want to know if there is a way I could install that private package (that doesn't have package.json) into Drupal application.
OR any other way around to achieve the same.
NOTE: I know one solution could be to host the build file at some CDN and pull it from there. But problem is, the Drupal app might be running behind a corporate network and users won't be able to access the internet openly. Therefore, we want to make the react app a part of build process, so once Drupal is served, react application would be a part of it already. No loading at runtime.
I am working on a react project in which I am using some open source libraries that I have to mention according to the license agreement. It seems to me that these disappear in the built version. How can I make the license files visible in the deployed version?
Place them in LICENSE.md in the root of your project, not in the dist/build folder. Refer to this GitHub guide on determining a location for your license for more info.
I am developing a project with frontend on ReactJS and backend on Java (Spark framework). To build server with frontend, I build the frontend using yarn build and then, using Maven, copy contents of build folder to src/main/resourses/public folder, from which Spark serves all static files. Recently, I moved to CRA and since then all icons disappeared on production build.
When I run the project on webpack-dev-server, everything works fine. All icons are loaded as you can see below:
But when I build production version of the frontend and copy it to the public folder, I get an this error:
The same fragment on production build:
My thoughts are that either icon fonts are copied incorrectly at some point, or the server cannot properly load the fonts, which is less probable as they were loaded earlier when I did not use CRA.
Also, it seems that fonts do exist in the website, because they appear as Sources in Chrome Dev Tools. However, as I said they might be loaded improperly.
P.S. I'm using the following versions of Semantic UI. I generated semantic folder in src directory using npm i semantic-ui.
semantic-ui: ^2.4.2;
semantic-ui-react: ^0.85.0
I found an issue. The problem was that after I built the frontend, Maven incorrectly copied the production build to the public folder
The solution was found here
I'm using create-react-app and Semantic UI React to create a web part for SharePoint. (2016 on-prem. Started as 2013, so I wasn't able to use SPFx, so it's just regular old React.)
I created the solution as a Farm solution, so I could map the Layouts folder, and the CRA build output (.js and .css files) is getting deployed to the Layouts folder. I've also mapped the 16 hive folder on the dev server as a drive on my development machine, so part of my development process has been, after running npm run build, to copy the bundles directly over to the server so I can check on my changes/progress etc., without going through the usual SharePoint deployment process.
I have only ever copied the .js and .css files, and the icons used to work.
Now however, the icons are not showing up any more, and it looks like the code is trying to load icons.[hash].woff2, icons.[hash].woff and icons.[hash].ttf from the build/static/media folder in the CRA app.
Specifically, I'm seeing 404s for
https://servername/static/media/icons.[hash].woff2 etc.
Now, I would prefer to get the icons bundled in with the regular .css (and/or .js) files, so I don't have to worry about the media folder. However, I don't really have a problem with having to deploy the icon files in a media folder as well, but I would need the React build to know the correct place to look for them which would not be in
https://servername/static/media
it would be more like
https://servername/sites/my-site/_layouts/path/to/my/feature/media
So how can I either
get the icons bundled in the .css/.js files
or
indicate to CRA/Webpack the place where those files will actually end up, so the app is looking for them in the right place?
Bypassed the problem by switching from bundling the Semantic UI CSS to pulling it from the official CDN, which makes it pull the icons from a CDN somewhere, so I don't have to deal with them.