I'm currently getting my feet wet in angular4 with the angular cli environment, and I'm trying to import the bootstrap.css from my modules in a way that feels right.
I'm currently importing it from my app.component.css like so:
#import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
This works, but having a relative path to a folder that should really be hidden doesn't sit well with me.
In the past I've used node to get around this by using an express static route:
var express = require('express');
var app = express();
app.use('/scripts', express.static('node_modules'));
But since angular CLI seems to cut node out of the development process, I'm looking for an alternative way to do that.
I tried adding to my module.ts:
import { RouterModule } from '#angular/router';
imports: [
RouterModule.forRoot([
{ path: 'scripts', redirectTo: './node_modules', pathMatch: 'full' }
])
]
But this dosn't seem to be doing anything. I'm not sure if I'm referencing my paths incorrectly, or I'm misusing the router module all together.
Is there a better way to bring in 3rd part assets?
Angular CLI will compress all CSS code into a couple of files after the build. You don't have to expose bootstrap.min.css though angular routes for it to work.
Rather, you can include it in configuration file.
Related
I have Node.js + Express backend app with some static routes, some internal (api) routes and Angular 11 app on frontend.
Now I'm trying to rebuild frontend using nrwl nx into three independent apps with shared libs but stuck with express routes.
Current version use one static route to serve whole angular app:
app.use("/", express.static(path.join(__dirname, "frontend")));
It works well, but when I'm trying to split routes like
app.use("/crm/admin/", express.static(path.join(__dirname, "crm-admin")));
app.use("/crm/moderator/", express.static(path.join(__dirname, "crm-moderator")));
app.use("/", express.static(path.join(__dirname, "client")));
I've got issues with angular routing inside admin or moderator apps - production build static app won't load anything
If I edit index base href to point to /crm/admin/ it still won't load page for same reason
Only if I remove all hash from filenames app loading but still have ussues with internal routing: It gives ability to log in and then redirect as it assumed in auth effect. but any other routes are not working as they do in serving app and written in root routes:
path: '',
component: AppComponent,
children: [
{
path: 'login',
component: AuthComponent,
},
{
path: 'logout',
component: AuthLogoutComponent,
},
{
path: 'personal',
loadChildren: () =>
import('./components/personal/personal.module').then(
(m) => m.PersonalModule
),
canActivate: [AuthGuardService],
},
{
path: 'orders',
loadChildren: () =>
import('./components/orders/orders.module').then(
(m) => m.OrdersModule
),
canActivate: [AuthGuardService],
},
{
path: '**',
redirectTo: 'personal',
pathMatch: 'full',
},
],
For testing purposes I've already tried to point crm-admin folder to "/" route. It works same as if I reproduce steps written above with broken routing.
Please, point me what I'm missing during building nx angular app with internal routing and trying to serve it from static express route.
Highly unlike to rebuild existing express app into nx controlled express app, if it possible. It works as intended and no needed to any changes.
Thanks in advance.
upd:
tried to add this
app.use("/crm/admin/", express.static(path.join(__dirname, "crm-admin")));
app.get("/crm/admin/", function (req, res) {
res.sendFile(path.join(__dirname, "./crm-admin/index.html"));
});
and rebuild not using --configuration=production. After fixing base href token in index file it works, but still have issues with routing If I try to change path in the browser address bar.
upd2:
If I add
"baseHref": "/crm/admin/",
"deployUrl": "/crm/admin/",
into angular.json into build section, builded app already have base href token pointed to express route, I've want it be served from, as well as it serving locally from localhost:4201/crm/admin but routing errors still present on builded app.
Well. after googling I've found an answer here, on stackoverflow.
Maybe it can be useful for someone else.
I'm using scss to style my next.js app however I noticed that all styles are missing when I preview the first paint via the network tab in google chrome.
As you can see the page is fairly simple and does not fetch any initial props. I'm suspecting that the server is for some reason not building the whole page (including styles) on the backend.
My next.config.js setup is:
const withStyles = require("#webdeb/next-styles");
module.exports = withStyles({
sass: true, // use .scss files
modules: true, // style.(m|module).css & style.(m|module).scss for module files
});
With newer nextjs versions, I don't think you need to use withStyles and similar plugins anymore.
global styles only
You can just:
install sass
install whatever css framework you're using and follow their instructions for how to include their css / scss files in your project
potentially get rid of your next.config.js file entirely if it's a simple project and all you had in the config file was css configuration stuff.
import your scss files directly into your js files (eg import '../styles/app.scss')
scoped scss styles
seems you can keep the next.config.js file, based on this workaround I found here through a google search:
const withStyles = require('#webdeb/next-styles')
module.exports = withStyles({
sass: true, // use .scss files
modules: true, // style.(m|module).css & style.(m|module).scss for module files
})
I just wanted to setup my vue project with the full webpack template, use vue router and link different urls to different components.
The src/router/index.html is the following:
import Vue from 'vue';
import Router from 'vue-router';
// eslint-disable-next-line
import Home from '../pages/home.vue';
// eslint-disable-next-line
import Config from '../pages/config.vue';
Vue.use(Router);
export default new Router({
mode: 'hash',
routes: [
{ path: '/', component: Home },
{ path: '/config', component: Config },
],
});
When I run npm run dev and access the above routes, I have the following output:
Up to here, everything is working fine. The problem is when I use the history mode, I can’t access to localhost:8080/config:
And the console doesn’t show any error:
Another thing I tried was switching the mode to history using the simple-webpack template. The worst part is that it worked! So, the problem is in the webpack-template, but I don't know how to make this work.
I'll appreciate any help.
Should I be loading photos in node by importing relative paths or by referencing the file URL, and how do you properly load photos from their relative path?
Currently I'm serving static files with express:
server.use(express.static(__dirname + '/../public'));
And loading photos by referencing file URLs:
<img src='/images/tom.jpg'/>
I have a webpack configuration set up to use file-loader on (png|jpg|gif), and the webpack docs say, that with file-loader, you can import photos from relative paths (https://webpack.js.org/loaders/file-loader/#src/components/Sidebar/Sidebar.jsx):
import img from './file.png'
With this configuration (this is the config I'm using):
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
}
However, when I try to import an image from it's relative path:
//import
import img from '../../public/images/tom.jpg';
//render
<img src={img}/>
I receive this error:
/Users/ryan/Desktop/Df/Coding/ryanchacon.io/node_modules/babel-core/lib/transformation/file/index.js:590
throw err;
^
SyntaxError:
/Users/ryan/Desktop/Df/Coding/ryanchacon.io/public/images/tom.jpg:
Unexpected character '�' (1:0)
1 | ����
But if I emit the 'import from relative path', start my server, and then add the relative import back, the image will load from its relative path. However, if I restart my server, the error throws again.
So instead I'm referencing the file URL to get around this error, but I'm not sure how I should properly load files from their relative path with my webpack/node configuration.
Currently, I'm running node v8.6.0, webpack v3.6.0, express v4.15.4, file-loader v1.1.5, and react v16.0.0.
In your server.js file, you're using server side rendering (which is awesome): ReactDOMServer.renderToString( <App /> ). The App component rendered on the server side is imported via the import App from './src/App'; statement. In the App.js file you have the JPG import statement: import img from '../public/hermes.jpg';.
Please notice that in this context, your node.js is not aware of any webpack bundle in your project, and node actually tries to import the '../public/hermes.jpg' file, which causes the error you're facing (node can only load JS modules).
So the question is, in fact, how to use file-loader in a universal/isomorphic manner. You can take a look at this example project: https://github.com/webpack/react-webpack-server-side-example that shows a webpack configuration for both the server and the client code. Theoretically, if you bundle your server code via webpack, when you run it, the JPG import statement would already be processed by the file loader and should not cause any problem. I have to admit that personally I do not think bundling server code is a good idea (bundling solves client side issues that are not really relevant on the server side).
If you insist using file-loader and bundling your image files into your client code, using server side webpack might be a good solution for you. If not, you can simply load the images from the /public folder.
For what it's worth, I believe that loading the images by using URLs is not only simpler, but also faster - the browser will download your lighter JS bundle (it's lighter because it does not contain encoded image files) and your code will start running earlier on, downloading the images from HTTP in a parallel, asynchronous manner.
I am building a React app using next.js, and I am playing around with the webpack config, in the next.config.js file.
Specifically, I'd like to have nicer imports using webpack's resolve.modules config.
However, when I add the following line in the next.config.js file :
config.resolve.modules
.concat(['styles','static','components','imports'])
and then
import FooBar from 'components/index/FooBar", for example in a pages/index.js file, it still won't work. FooBar is not found.
The component exists, and the import works fine if I use a relative path. However I'd like to have nicer imports, and I know it is possible with webpack (see react-boilerplate for example).
Am I doing something wrong with webpack ? Maybe it's a real bug ?
Check the NextJS example with-absolute-imports
const path = require('path')
module.exports = {
webpack (config, options) {
config.resolve.alias['components'] = path.join(__dirname, 'components')
return config
}
}
Alternatively, should work by adding this to next.config.js file:
config.resolve.modules.push(path.resolve('./'));
(and it doesn't require any babel plugin)
resolve.modules will look into the directories you configured for the modules you import. So when import components/index/FooBar it will look in:
styles/components/index/FooBar
static/components/index/FooBar
components/components/index/FooBar
imports/components/index/FooBar
A relative path looks further, but that's not relevant here and the path remains the same, just climbing up the directory tree (see resolve.modules).
Presumably none of these paths match your component. To get component/index/FooBar you need to import just index/FooBar.
import FooBar from 'index/FooBar';