In my jhipster application I have a custom css (.css other than "main"), once I deployed to heroku, my custom css seems not be found. The main.css in the index.html is called as: styles/74de7bc1.main.css but my custom css is called as: styles/custom.css and and is not found. I'm doing something wrong?
If your CSS has been renamed, it is because you have packaged your application with the "production" profile. Please note it is in src/main/webapp/dist directory, and this is not your original index.html.
The current Heroku sub-generator works with the "default" profile, which is the "development" profile. You can try to run with the "production" profile on Heroku (see the documentation, you need to set this up in an environment variable), but this is not tested or supported.
This shouldn't be hard to do, but as we are currently in BETA mode. I'm first trying to have the Heroku sub generator working fine with the default options, before working on more advanced usage.
Related
I have a Wordle-esque app that I want to deploy using Azure. Repo here. It is a fork from a popular open-source project, and I can also locally build and run the game. Locally, it runs perfectly.
I am trying to use Azure App Services to deploy it, using a Github Action. All the Actions pass, and the App can be successfully built. However, when I try to view the deployment here the only error I am receiving is
You do not have permission to view this directory or page.
Since it runs locally, and it pass its github action build, I do not know how to proceed here. I have tried restarting the app, and changing the resources I am using to host it, but that does not work. Some other answers seem to suggest the problem is about it not finding index.html, but I can access that through https://shetland-wordle.azurewebsites.net/public/index.html and the page is blank.
If i look under wwwroot/ in the Azure debugger I see the following file structure:
Any help would be appreciated
turns out it was something strange with package.json. I needed to change the path to my react scripts:
"start": "node_modules/react-scripts/bin/react-scripts.js start"
Not sure if its good practise to do this, but it works now
Preact guide says
To alias any package in webpack, you need to add the resolve.alias section to your config. Depending on the configuration you're using, this section may already be present, but missing the aliases for Preact.
But using any of the official templates (default, typescript, material web components, etc...) doesn't generate any webpack.config.js file and preact has no eject command like react to access the full project configuration.
So, few things:
Firstly, Preact and Preact-CLI are two separate items.
You're quoting the section from our docs labeled "Integrating into an existing pipeline". This means adding Preact to an existing React application of yours, but, if you're using one of our templates, then this is a new project, not an existing one.
preact has no eject command like react to access the full project configuration.
There is no way to "eject" React. What you're referring to is the build tool called "Create React App".
We do allow for full configuration of the Webpack config with a preact.config.js. With this, you can edit any parts of the config that you'd like: change plugin options, add loaders, remove plugins, etc., without owning the configuration yourself. You can just comment out your changes in your config and you're back to the default config.
We believe CRA's "eject" is a poor API and therefore don't match it.
I've created two pipelines: build and release for Nodejs app.
Here is the link to nodejs app repo: azure web service
Here is the tasks for build pipeline:
Here is the wwwroot folder structure:
So it is look like all required files are present.
Despite that, I'm constantly receiving:
You do not have permission to view this directory or page
I've tried to add web.config file, but it did not help.
I have front end application on same App service Plan and it works, so it is no way that I have bad service plan.
Do you have any suggestions?
Thanks a lot.
I was able to deploy my service only after using nodejs-docs-hello-world starter.
It is looks like web.config is a required file, btw, still did not find any meaningfull documentation for web.config.
Make sure your azure nodejs env support your js syntax (import from ...), in other case use webpack or typescript.
I'have found App Service Editor very helpful if you want to debug your code errors. See section Output.
I had a problem also with nodejs version, despite the fact I choosed node 12 tls during web app creation, I have noticed that my app used node 6 under the hood. So I changed default nodejs version to 10. See here how to do it
Also, I want to thank #Jason Pan for his help.
I had started with intention to bring UI of adminLTE into Jhipster gateway app. For this, I followed following steps:
getting repository from https://github.com/TwanoO67/bootstraping-ngx-admin-lte.
copying required dependency from package.json of AdminLTE to package.json of jhipster app. It downloaded adminLTE module in node_module folder.
copying source code, tweaking/changing, solving errors where ever required.
I could successfully bring the code from admin folder of adminLTE under jhipser app, and I could achieve the following result.
Now the problem is it is complaining about AdminLTE is not defined. AdminLTE is defined in script.js in "assets/js/scripts.js"
I am looking for ways to make this file available to my code in any.component.ts. One way I tried is, including in script tag in index.html and adding following line to CopyWebpackPlugin in wepack.common.js.
{ from: './src/main/webapp/assets', to: 'assets' }
This successfully loads the file in browser and init function in script.js also gets called. But then it complains about use of jQuery in script.js.
After fixing this, I think I would be successful in bringing the AdminLTE to jhipster app.
you can use jhipster-adminLTE,it's jhipster admin lte theme with angular-dashboard-framework.
It is very hard to apply ngx-admin to a JHisper project. Since JHipster uses webpack to build but ngx-admin don't. But I did at last. I share my work on my github you can follow the instructions. I hope it helps.
I'm trying to debug the back-end of the react - express application. I'm using webpack for bundling.
How to edit configuration on WebStorm so that I could debug both front end and back-end? I'm using WebStorm 2016.
You need to create and start a Node.js run/debug configuration to debug your server-side code and create and start a JavaScript debug configuration for the client-side code.
In the Node.js configuration in the JavaScript file field you need to specify the path to file that kicks off the server.
In the JavaScript configuration in the URL field specify the URL your server is running on. You might also need to configure the mappings between local paths and remote URLs: that's most probably should be between the folder where the component are located and webpack:///. (see this answer for more details).
Also make sure that you have dev-tools: 'source-map' in your Webpack configuration.
Went through some documentations on WebStrom and finally managed to get it working. First select Edit Configurations then a menu will pop up which will allow you to edit Run/Debug Configurations. Click the + button on the left side and add a node js. From that change the Node interpreter from default(local) node_modules to the babel node inside your project dependencies. eg ~/MyWork/Project/node_modules/.bin/babel-node. Then Add --presets=babel-preset-es2015 as Node Parameters. Fill the rest of the configurations and click save and run the project.
Here is an example: